您的位置：首页 > 其它

DIV水平垂直居中

2017-09-19 10:46 169 查看

代码中包含：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航