方法一：行高（line-height） 行高是垂直居中最简单的方式，仅适用于单行文本
<div class="div"> aaa </div> .div { width: 600px; height: 200px; background-color: #f5f5f5; text-align: center; border: 1px solid red; line-height: 200px; }方法二：伪元素（::before、::after） CSS里头vertical-align这个属性，这个属性虽然是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，并不是相对于外框的高度垂直居中。记得要把 div 设为 display:inline-block，毕竟vertical-align:middle；是针对行内元素，div本身是block，所以必须要做更改！
<div class="div"> <div class="vertical-0"></div> </div> .div { width: 600px; height: 200px; background-color: #f5f5f5; text-align: center; border: 1px solid red; } .div .vertical-0 { display: inline-block; background-color: red; width: 50px; height: 50px; vertical-align: middle; } .div::after { content: ''; vertical-align: middle; height: 100%; display: inline-block; position: relative; }方法三：display:table-cell 可以将要垂直居中元素的父元素的display改为table-cell，就可以轻松实现，不过修改display有时候也会造成其他样式属性的连动影响，需要小心使用
<div class="div"> <div class="vertical-0"></div> </div> .div { width: 600px; height: 200px; background-color: #f5f5f5; border: 1px solid red; display: table-cell; vertical-align: middle; } .div .vertical-0 { background-color: red; width: 50px; height: 50px; margin: 0 auto; // 水平居中 }方法四：transform transform是CSS3的新属性，利用transform的translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果
<div class="div"> <div class="vertical-0"></div> </div> .div { width: 600px; height: 200px; background-color: #f5f5f5; border: 1px solid red; } .div .vertical-0 { background-color: red; width: 50px; height: 50px; position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; // 水平居中 }方法五：calc动态计算 50%的外框div高度+ 50%的垂直居中div高度，就可以做到垂直居中，需要知道垂直居中div高度是才可实现垂直居中，子元素必须要加上position:relative，不然就会没有效果
<div class="div"> <div class="vertical-0"></div> </div> .div { width: 600px; height: 200px; background-color: #f5f5f5; border: 1px solid red; } .div .vertical-0 { background-color: red; width: 50px; height: 50px; position: relative; top: calc(50% - 25px); margin: 0 auto; // 水平居中 }方法六：绝对定位 利用CSS的position:absolute，绝对位置来指定。要特别注意的是，设定绝对定位的子元素，其父元素的position必须要指定为relative！而且绝对定位的元素是会相互覆盖的，所以如果内容元素比较多，可能就会有些问题
<div class="div"> <div class="vertical-0"></div> </div> .div { position: relative; width: 600px; height: 200px; background-color: #f5f5f5; border: 1px solid red; } .div .vertical-0 { background-color: red; width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }方法七：display:flex display:flex为弹性布局，利用其align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果
<div class="div"> <div class="vertical-0"></div> </div> .div { position: relative; width: 600px; height: 200px; background-color: #f5f5f5; border: 1px solid red; display: flex; align-items: center; justify-content: center; // 水平居中 } .div .vertical-0 { background-color: red; width: 50px; height: 50px; }以上就是一些垂直居中的方法，由于垂直居中往往会动用到修改display这个属性，往往也会在排版上造成一些影响，因此如何活用这些CSS垂直居中的方法，就要看大家的样式结构而灵活运用
