元素水平垂直居中的方法

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

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

1.1 水平居中

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

1.2 垂直居中

1.2.1单行文本的垂直居中

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

<style>
    div {
        height: 50px;
        width: 300px;
        border: 1px solid red;
        line-height: 50px;    /* 行高和height相等就能使行内元素垂直居中 */
        text-align: center;   /* 实现行内元素水平居中 */
    }
</style>
<div>
  <span>行内元素的水平居中和垂直居中</span>
</div>

1.2.2 多行文本的垂直居中

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

<style>
.box {
    width: 300px;
    border: 1px solid red;
    text-align: center;         /* 实现水平居中 */
    /* line-height: 200px; */   /* 多行文本时，line-height不能再实现垂直居中了 */
    padding: 50px 0;    /* 在盒子div不固定高度的时候，可以使用设置上下padding值来实现垂直居中 */
}
</style>
<div class="box">
    <span>多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,</span>
</div>

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

<style>
.box {
   /* 在固定高度的时候，使用display设置为table，配合样式vertical-align：middle来实现垂直居中 */
   display: table;
   width: 300px;
   height: 200px;    /* 固定盒子高度为200px */
   border: 1px solid red;
   text-align: center;   /* 实现水平居中 */
        }
.box span {
   display: table-cell;   /* 子元素需要设置为display:table-cell */
   vertical-align: middle;   /* 配合使用vertical-align: middle; */
}
</style>
<div class="box">
    <span>多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中,多行文本实现水平垂直居中</span>
</div>

1.3 小结

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

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

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

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

<style>
.box1 {
    /* 使用弹性盒模型(flex布局) */
    display: flex;
    justify-content: center;   /* 默认主轴为x轴，实现水平居中 */
    align-items: center;      /* 实现垂直居中 */
    width: 300px;
    height: 140px;
    border: 1px solid red;
}
.item1 {
    width: 100px;
    height: 60px;
    background-color: pink;
}
</style>
<div class="box">
    <div class="item1"></div>
</div>

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

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

<style>
.box {
   position: relative;   /* 父相 */
   width: 300px;
   height: 300px;
   border: 1px solid black;
}     
.item2 {
   position: absolute;  /* 子绝 */
   left: 50%;  /* 与父盒子最左边的距离为父盒子宽度的一半 这就偏右了*/
   top: 50%;   /*与父盒子最上边的距离为父盒子高度的一半  这就偏下了*/
   margin-left: -50px;  /* margin注意要为负值  往回（向左）走宽度的一半*/
   margin-top: -50px;   /* margin注意要为负值  往回（向上）走高度的一半 */
   width: 100px;
   height: 100px;
   background-color: aqua;
}
</style>
div class="box">
        <div class="item2"></div>
</div>

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

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

<style>
.box {
   position: relative;   /* 父相 */
   width: 300px;   /* 可以更改宽度，但不影响水平居中的效果 */
   height: 300px;  /* 可以更改高度，但不影响垂直居中的效果 */
   border: 1px solid black;
}     
.item3 {
   position: absolute;  /* 子绝 */
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   /* 以上代码让子元素处于父盒子左上角 */
   margin: auto;    /* 使用auto就可以让子元素水平垂直居中 */
   width: 100px;
   height: 160px;
   background-color: tomato;
}
</style>
div class="box">
   <div class="item3"></div>
</div>

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

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

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

<style>
.box {
   position: relative;   /* 父相 */
   width: 300px;    /* 宽度随便更改，都能保证水平居中 */
   height: 300px;   /* 高度随便更改，都能保证垂直居中 */
   border: 1px solid blue;
}     
.item4 {
   position: absolute;  /* 子绝 */
   left: 50%;  /* 与父盒子最左边的距离为父盒子宽度的一半 这就偏右了*/
   top: 50%;   /*与父盒子最上边的距离为父盒子高度的一半  这就偏下了*/
   transform: translate(-50%, -50%);  /* 注意要为负值，向左向上移动自身宽度和高度的一半 */
   width: 110px;
   height: 110px;
   background-color: purple;
}
</style>
div class="box">
        <div class="item2"></div>
</div>
translate（）括号里如果写百分比，那么移动的距离是相对自身宽度或高度的百分比。

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

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

2.5 小结

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