CSS垂直居中

<div id="box">
    <div id="child">test vertical align</div>
</div>

1. 绝对定位+transform

   #box {
       width: 300px;
       height: 300px;
       background: #ddd;
       position: relative;
   }
   #child {
       background: orange;
       position: absolute;
       top: 50%; //div顶边距离box的位置
       transform: translate(0, -50%);//向y轴反方向（即向上）平移元素高度的一半
   }
   

transform指变换、变形，是css3的一个属性，和其他width，height属性一样；translate 是transform的属性值，是指元素进行2D变换，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少。

2. 绝对定位+负外边距

   #box {
       width: 300px;
       height: 300px;
       background: #ddd;
       position: relative;
   }
   #child {
       width: 50%;
       height: 30%;
       background: orange;
       position: absolute;
       top: 50%;
       margin: -15% 0 0 0;
   }
   

设置child的高度为box的30%（可以是0-100%任意值x）；使用绝对定位脱离文档流；设置child上边界距离box上边界为50%*box高度；设置child的上margin上移15%（x的一半）。

3. 绝对定位+margin：auto

   #box {
       width: 300px;
       height: 300px;
       background: #ddd;
       position: relative;
   }
   #child {
       width: 200px;
       height: 100px;
       background: orange;
       position: absolute;
       top: 0;
       bottom: 0;
       margin: auto;
       line-height: 100px;
   }
   

将child元素相对父元素绝对定位；设置bottom和top为相等值；设置child的margin属性为auto

4. flex布局

   #box {
       width: 300px;
       height: 300px;
       background: #ddd;
       display: flex;
       align-items: center;
   }
   #child {
       width: 300px;
       height: 100px;
       background: orange;
   }
   

​ 父元素设置display: flex为弹性盒子；添加盒子内项目在纵轴上的对齐方式为center。

5. flex设定纵轴为主轴

   #box {
       width: 300px;
       height: 300px;
       background: #ddd;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   #child {
       width: 300px;
       height: 100px;
       background: orange;
   }
   

给父元素设置弹性盒子；改变主轴方向为纵轴flex-direction: column；justify-content 属性定义项目在主轴上的对齐方式为居中。