CSS垂直居中的8种方法

1、通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

在使用vertical-align：middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

<html>
<head>
    <title>demo</title>
    <style type="text/css" media="screen">
        .parentBox{
            background-color: pink;
            width: 500px;
            height: 200px;
            text-align: center;
        }
        .parentBox .childBox{
            background-color: deepskyblue;
            display: inline-block;
            color: #ffffff;
            width: 100px;
            height: 100px;
            line-height: 100px;
            vertical-align: middle;
        }
        .parentBox .brotherBox{
            height: 100%;
            width: 2px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="parentBox">
    <div class="childBox">
        子元素
    </div><!-- / -->
    <div class="brotherBox">
        
    </div><!-- / -->
</div><!-- / -->
</body>
</html>