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

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #div #居中

web前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用CSS实现元素水平垂直居中的方法。通过使用display属性配合table和table-cell，可以轻松实现在不同屏幕尺寸下元素的精确居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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>