DIV水平垂直居中

代码中包含：

1.固定宽高的DIV水平垂直居中
2.不固定宽高，通过before选择器实现的
3.不固定宽高，通过table布局实现的
4.不固定宽高，通过display:table实现的
5.不固定宽高，通过css3实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .block:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div style="position:relative;background: #00a0e9;width: 500px;height: 200px;">
    <div style="position: absolute;background: #00cc66;width: 200px;height: 100px;left: 50%;top: 50%;margin-left: -100px;margin-top: -50px;"></div>
</div>
<div class="block" style="position:relative;text-align:center;background: #4b7ae9;width: 500px;height: 200px;">
    <span>徐同保</span>
</div>
<table style="width: 500px;height:200px;background: #609a54">
    <tr>
        <td style="text-align: center;vertical-align: middle;">
            徐同保
        </td>
    </tr>
</table>
<div style="display: table;width: 500px;height:200px;background: #8e8e9a;">
    <div style="display: table-cell;text-align: center;vertical-align: middle;">
        徐同保
    </div>
</div>
<div style="justify-content: center;align-items: center;display:flex;background:#da4939;width: 500px;height:200px;">
    徐同保
</div>
</body>
</html>




posted @ 2017-09-19 10:47  徐同保  阅读(208)  评论(0)  编辑  收藏  举报