纯CSS设计div内部元素水平垂直居中

最新推荐文章于 2021-08-04 09:08:58 发布

HOOKTTG

最新推荐文章于 2021-08-04 09:08:58 发布

阅读量857

点赞数

分类专栏： web前端文章标签： html css div 居中

本文链接：https://blog.csdn.net/HOOKTTG/article/details/51842652

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

查阅学习了网上的很多居中方法，总结后还是这个方法比较好用，存档待查。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
    <style>
        .one{
            display:table;
            width:400px;
            height:400px;
            background-color:#000000;
        }
        .two{
            display:table-cell;            
            background-color:#000000;
            text-align:center;
            vertical-align:middle;
        }
        .three{
            margin:0 auto;
            width:100px;
            height:100px;
            background-color:#ff0000;
        }
    </style>
</head>
<body>

<div class="one">
    <div class="two">
        <div class="three">
        </div>
    </div>
</div>
</body>
</html>