阅读 2234

你真的掌握了CSS水平垂直居中了吗?

居中这个特点在网页中真的是随处可见,这是一个非常基础但又是非常重要的属性,所以面试官也经常会在面试中问到这个问题。我们要做的不是只掌握一两种,而是要尽可能多地掌握大部分方法。现在就让我们来看一看水平垂直居中都有哪一些常见的方法吧。

我认为可以将这些方法分成两个大类:居中元素(子元素)的宽高已知和居中元素宽高未知

居中元素宽高已知

  • absolute + margin
  • absolute + calc

居中元素宽高未知

  • flex
  • absolute + transform
  • lineheight
  • grid
  • css-table
  • writing-mode

首先,让我们来看一下子元素宽高未知的居中方法。

flex

flex应该是本人最喜欢用的方法之一了。代码简介明了,通俗易懂,没有太多花里胡哨的东西。

<div class="wrap">
        <div class="box">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}

.box {
    background-color: blue;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

【注】以下效果图一样就不再放图了

grid

这是css3一个新的网格布局,但由于兼容性较差,不建议使用。

<div class="wrap">
        <div class="box">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}
复制代码

absolute + transform

<div class="wrap">
        <div class="box">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
复制代码

lineheight

<div class="wrap">
        <div class="box">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    /* font-size: 0; */
    line-height: 400px;
    text-align: center;
}
.box {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    line-height: initial;
    text-align: center;
}
复制代码

css-table

<div class="wrap">
        <div class="box">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.wrap {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
复制代码

writing-mode

writing-mode不常见,用它来实现居中的方法也有点难理解,这里推荐一篇博客。 欢迎大家访问这篇博客

以上就是子元素宽高未知的情况下居中的一些方法,下面来看一下宽高已知的方法。

absolute + margin

<div class="wrap">
        <div class="box size">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.box.size{
    width: 150px;
    height: 150px;
}

/* 第一种 */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -75px;
    margin-left: -75px;
    text-align: center;
}

/* 第二种 */
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    text-align: center;
}
复制代码

absolute + calc

<div class="wrap">
        <div class="box size">Hello World!</div>
</div>
复制代码
.wrap {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
.box {
    background-color: blue;
}
.box.size{
    width: 150px;
    height: 150px;
}
.wrap {
    position: relative;
}
.box {
    position: absolute;
    top:  calc(50% - 75px);
    left: calc(50% - 75px);
    text-align: center;
}
复制代码

补充

以上这些方法都是子元素在父元素中水平垂直居中,单这还不够。如果我们想要整个容器在浏览器中水平垂直居中,并且可以随着浏览器缩放,那有如何呢?

<div class="box"></div>
复制代码
.box {
        width: 400px;
        height: 400px;
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -200px;
        margin-top: -200px;
        background-color: red;
}
复制代码

总结

对于居中方法,我个人是比较喜欢用flex和absolute + margin这两类方法。代码简单明了,通俗易懂,兼容性也不错。当然,仁者见仁智者见智,只要实现了居中就可以了。(本文是参考了一些前辈的文章,再加上自己的一些理解,不足之处请见谅!)

文章分类
前端
文章标签