垂直居中

1、vertical-align

设置的行内元素所在行的对齐基线，对行内元素和行内块状元素均有效

vertical-align: middle;

2、line-height

设置子元素的行高和父元素的高度相同，与vertical-align配合使用

3、position + margin

设置子元素相对于父元素为绝对定位,再设置元素的margin为负

position: absolute；
left: 50%;
top: 50%；
margin-left: -20px;//元素宽度的一半
margin-top: -20px;//元素高度的一半

4、position + transform

position: absolute；
left: 50%;
top: 50%；
transform: translate(-50%, -50%);

5、position + margin +固定宽高

width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;

应用

1、图片垂直居中

<div class="parent">
    <div class="child1">
        <img src="images/dh.png" alt="">测试文字
    </div>
    <div class="child2">
        <img src="images/dh.png" alt="">测试文字
    </div>
</div>

.parent {
    height: 100px;
    width: 100%;
    background-color: #000;
    color: #fff;
}
.child1 {
    float: left;
    line-height: 100px;
}
.child1 img{
    vertical-align: middle;
}
.child2 {
    float: right;
    line-height: 100px;
}

效果：

1、当为.child1和.child2设置了和父元素高度大小一样的行高后，测试文字就会居中，而这时候两个导航图片则不会。这里测试文字居中也只是差不多居中，因为它的vertical-align其实为baseline，有细微的差别。因此想要文字完全居中，可以使用span包裹后设置vertical-align = middle。

2、再为.child1设置vertical-align = middle,导航图片就会居中了。

3、.child2的导航图片并未垂直居中，可以看到它与文字的基线对齐了，其实还是因为它的垂直对齐方式为baseline。

总结：

原理：img属于行内元素，所以vertical-align 对其有效。

二级标题

三级标题

四级标题

注：