CSS3实现居中的常用方法总结

在前端开发项目中，经常用到盒子的水平垂直居中。盒子的水平居中相对容易实现，垂直居中的实现相对复杂一些，在这里主要总结几个在项目中经常使用的方法

一、利用定位（position）的方法实现

利用定位（position）有三种实现方式：

第一种方法，将盒子position设置为absolute，将父级position设置为relative，再将盒top、left、right、bottom都设置为0，最后将margin设置为0（水平和垂直平分剩下的空间），从而实现盒子的水平垂直居中，代码展示如下：

效果如下：

code_1.png

第二种方法，只设置盒子的position为relative，将盒子的top设置为50%，再将margin设置为‘0 auto’让盒子在水平方向居中，最后将margin-top设置为盒子高度的一半将盒子向上偏移，从而实现盒子的水平垂直居中，代码展示如下：

效果如下：

code_2.png

上面使用了margin-top将盒子向上偏移，除了margin-top也可以使用CSS3的transform属性，将盒子的transform设置为translateY(-50%)，将盒子向Y轴（向上）平移自身高度的一半，代码展示如下：

第三种方法，这种方式大体就是第一种方法与第二种方法的结合，将盒子position设置为absolute，将父级position设置为relative，再将top与left设置为50%，最后将margin-top与margin-left设置为盒子高度与宽度的一半，从而实现盒子的水平垂直居中，代码展示如下：

上面使用的方法也可以使用transform去实现，代码展示如下：

二、利用弹性布局（flex）实现

想利用好弹性布局（flex），首先得了解与学习弹性布局（flex），想了解与学习的可以去看看阮一峰老师的博客，这里简单的学习两个属性：

1.justify-content属性：定义了项目在主轴上的对齐方式。

可选值：flex-start | flex-end | center | space-between | space-around;

2.align-items属性:定义项目在交叉轴上如何对齐。

可选值：flex-start | flex-end | center | baseline | stretch;

弹性布局（flex）的实现方法，首先将盒子的父元素display设置为flex，然后将justify-content与align-items设置为center，这样就实现了水平垂直居中，当然弹性布局（flex）的用途更多，感兴趣可以去深入学习，代码展示如下：

效果如下：

code_3.png

以上这些水平垂直居中方式都只是项目中常用的，当然还有更多的方法可以实现，这些在实际项目中没有遇到过，所以暂时就介绍这些啦，当然具体使用哪一种得以当时的条件来选择。更多的欢迎大家一起学习探讨！