元素水平垂直居中的方法

我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。

1.行内元素水平垂直居中的方法

1.1 水平居中

text-align:center;    /* 实现行内元素水平居中 */

1.2 垂直居中

1.2.1单行文本的垂直居中

只需要让元素高度和行高相等即可；

  行内元素的水平居中和垂直居中

1.2.2 多行文本的垂直居中

① 不固定高度的垂直居中——通过设置上下的padding值即可实现

    多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,

② 固定高度的垂直居中——通过使用表格属性实现，具体为使用display设置行内元素的父盒子为table，然后将行内元素设置为display为table-cell，然后配合样式vertical-align：middle来实现垂直居中

    多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中

1.3 小结

综上，行内元素的水平居中，都是使用 text-align: center;  而垂直居中就要根据情况选择不同方法了，需要注意每种方法的使用前提。

2.块级元素水平垂直居中的方法

2.1 使用flex布局实现水平垂直居中

这种方法借助flex布局中父项属性的①justify-content：center；实现主轴上子元素居中；（默认水平）     ②align-items：center；实现侧轴上子元素居中；（默认垂直）

2.2  绝对定位配合margin的方式实现水平垂直居中

注意：使用这种方法的前提条件是父盒子的高度和宽度必须是固定的，只要变化了，就不再水平垂直居中，除非重新计算margin的偏移量。

div class="box">
        

2.3  绝对定位配合margin的方式实现水平垂直居中

注意：上述使用margin的方法需要固定宽高，而现在要介绍的方法是不需要固定宽高，就算宽高改变了，依旧是水平垂直居中的。

div class="box">
   

2.4  绝对定位配合translate的方式实现水平垂直居中

问：在不使用flex布局时，父盒子宽高又不固定时，如何实现水平垂直居中？

答：可以采取绝对定位配合css3中的translate的方式实现

div class="box">
        

 translate（）括号里如果写百分比，那么移动的距离是相对自身宽度或高度的百分比。

所以这里需要向左向上移动自身宽度和高度的一半，那么就使用translate（-50%，-50%）；

一定要注意网页中，向右向下是为正的，所以向左向上即为负值。

2.5 小结

块级元素水平垂直居中的方法还是比较多的，但是每种方法都有其对应的条件，所以要根据条件进行选择最合适的方法，但是我们一般使用最多的是flex布局和绝对定位+css3中的translate这两种方式。除非需求不允许这两种方式，才会去选择绝对定位配合margin的方式。