跳到主要内容

居中效果实现

几种垂直水平居中对其方式​

所有实现均以以下 HTML 代码为准：

<body>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</body>

利用定位实现​

.wrapper{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}
.wrapper .box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 100px;
    background: red;
    transform: translate(-50%,-50%);
}

上面代码还用到了 transform 属性，其中的 translate() 值是相对于自身容器大小的 50%（而非父容器）；因此做到了居中。

利用 CSS3 中的弹性盒子​

.wrapper{
    height: 200px;
    width: 200px;
    background: green;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .box{
    height: 100px;
    width: 50px;
    background: red;
}

使用这种方法只需在父容器中定义属性即可。justify-content 属性是值子元素在父元素中主轴的对其方式（设置 center 即居中）；align-items 属性是指子元素在其父元素中交叉轴的对其方式（设置成 center 即居中）。在二维平面，主轴是横轴时，则交叉轴是纵轴，横纵都居中即垂直水平居中；主轴是纵轴，则交叉轴为横轴，效果也是一样。

使用 CSS3 中的 calc 计算函数​

.wrapper{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}
.wrapper .box{
    position: absolute;
    height: 150px;
    width: 100px;
    left: calc(50% - 100px/2);
    top: calc(50% - 150px/2);
    background: red;
}

这种方法也是用了定位，和使用 transform 属性比较相似，但这里用了 calc 计算函数来实现。需要注意的是：calc 括号里的 百分数转换是看前面的属性名的，这里的 50% 即 .box 的 left 属性为 50%；如果改成 transform: translate(calc(50%)) 则是指元素本身大小的 50%。

定位 + margin: auto​

.wrapper{
    position: relative;
    height: 200px;
    width: 200px;
    background: red;
}
.wrapper .box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
    width: 100px;
    background: green;
}

这里把 .box 的绝对定位的四个值定义了一遍，而且全是 0；最后 margin: auto; 这样为什么就居中了呢？这四个值其中少一个，你就会发现，子容器只能向一个轴做居中，因此必须都设置，且为 0。

绝对定位 + margin 实现居中​

.wrapper{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}
.wrapper .box{
    position: absolute;
    left: 50%;
    top: 50%;

    margin-left: -25px;
    margin-top: -50px;

    height: 100px;
    width: 50px;
    background: red;
}

在这个例子中，只是在方法 1. 的基础上将 transform 属性改成了 margin 属性，因为，margin 属性的值也是相对于自身容器大小的，让 margin-left的值和 margin-top 设为负的自身宽高的一半，即实现居中。为什么不使用 -50% 呢？你可以亲自试一下，如果使用百分数，效果不会出现。原因是使用百分号时，值是基于父容器进行计算的，而非基于自身！

使用 box 布局（该布局不兼容，因此不太推荐）​

.wrapper{
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* 做兼容处理，这里没写完 */
    height: 200px;
    width: 200px;
    background: green;
    margin: 20px auto;
}
.wrapper .box{
    height: 80px;
    width: 50px;
    background: red;
}

以上代码中，起到居中作用的有两个属性：

  1. -webkit-box-pack: center;
  2. -webkit-box-align: center;
    这两个属性与 flex 布局中的那两个属性作用一样，都可以让主轴或交叉轴居中。

使用 grid 实现居中对其​

.wrapper{
    display: grid;
    place-content: center;

    height: 200px;
    width: 200px;
    background: green; 
}
.wrapper .box{
    height: 50px;
    width: 100px;
    background: red; 
}

当然，这里的 place-content: center; 也可以换成 place-items: center; 效果都是一样的，这两个属性都是缩写，其对应的具体属性如下：

  1. place-content:

    1. align-content
    2. justify-content

  2. place-items:

    1. align-items
    2. justify-items

这么一看，感觉有点太相似他们！而且在 flex 布局中也有两个属性和这其中的两个属性一样： justify-content 和 align-items；而在 grid 布局中这四个属性表达的又是些什么意思呢？ flex 布局中的这两个属性基本功能一致，而其它两个区别描述如下：

当你使用 px 这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿行轴进行对齐(相反于 justify-content 属性定义的沿列轴对齐)。