HTML+CSS 五种居中方式

最新推荐文章于 2023-02-27 09:41:13 发布

原创最新推荐文章于 2023-02-27 09:41:13 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍并演示了五种不同的CSS技巧来实现在父容器中使子元素水平及垂直居中的效果，包括利用定位、transform属性、margin:auto、display:table-cell以及display:flex等方法。

<div class="par">
    <div class="son"></div>
</div>

方法一：利用定位

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }

方法二：利用 transform

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

方法三：利用 margin:auto;

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法四:利用 display:table-cell

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        display: table-cell;
        text-align: center;
        vertical-align: middle;

    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
        display: inline-block;
    }

方法五：利用 display：flex;设置垂直水平都居中

    .par {
        width: 500px;
        height: 500px;
        background-color: rgb(241, 112, 60);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: rgb(49, 218, 71);
    }