首页 > 代码库 > CSS布局--水平居中

CSS布局--水平居中

2024-09-11 22:14:56   215人阅读

　　这篇博文主要记录各种实现水平居中的方法，还有它们的优缺点等。

　　子元素div在父元素div中实现水平居中

　　1.使用inline-block 和 text-align：

　　

<!DOCTYPE html>
<html>
<head>
    <title>asd</title>
    <style type="text/css">
        .parent
        {
            height: 200px;
            background-color: black;
            text-align: center;
        }
        .child
        {
            height: 150px;
            width: 600px;
            background-color:purple;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

技术分享

CSS布局--水平居中


联系
我们