前端H5面试题CSS：如何使一个盒子水平垂直居中？

最新推荐文章于 2024-02-04 09:44:50 发布

红嘴-蓝鹊

最新推荐文章于 2024-02-04 09:44:50 发布

阅读量448

点赞数

分类专栏：前端H5面试题CSS 文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_48475463/article/details/122685360

版权

前端H5面试题CSS 专栏收录该内容

2 篇文章

订阅专栏

1. 利用定位（常用方法,推荐）

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>

2. 利用 ( margin-auto )

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>

3. 利用 ( display-flex )设置垂直水平都居中

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>

4. 利用 ( display-table-cell )

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>

5. 计算父盒子与子盒子的空间距离

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            overflow: hidden;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 200px;
            margin-left: 200px;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>

6. 利用 transform

    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: cyan;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我是子元素</div>
    </div>
</body>