DIV水平垂直居中

最新推荐文章于 2024-09-19 17:42:53 发布

徐同保

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量588

点赞数 2

分类专栏： web前端前端技术分享文章标签： css 水平垂直居中

本文链接：https://blog.csdn.net/xutongbao/article/details/78027413

版权

web前端同时被 2 个专栏收录

735 篇文章 16 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

代码中包含：

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>