CSS居中——水平居中、垂直居中方法

非早起选手

已于 2022-03-22 06:56:11 修改

阅读量5.5k

点赞数 3

分类专栏：前端基础文章标签： html css

于 2021-10-26 18:34:12 首次发布

本文链接：https://blog.csdn.net/zg0601/article/details/120977938

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

水平居中

1、行内或类行内元素（如文本、链接）

在块级父元素中用CSS样式实现行内元素水平居中，只需要设置：text-align: center;

这种方法可以让 inline / inline-block / inline-table / flex 等类型的元素实现居中。

效果图：

代码：

<style>
    body{
        background-color: coral;
    }
    #div1,#div2{
        width: 400px;
        height: 100px;
        text-align: center;
        margin: 20px 0;
        padding: 20px;
        background-color: white;
    }
    #div2 a{
        text-decoration: none;
        color: white;
        padding: 3px 8px;
        border-radius: 5px;
        background-color: cornflowerblue;
    }
</style>

<body>
    <div id="div1">
        这是一段简单的文字，水平居中
    </div>
    <div id="div2">
        <a href="#">hyperlink1</a>
        <a href="#">hyperlink2</a>
        <a href="#">hyperlink3</a>
        <a href="#">hyperlink4</a>
    </div>
</body>

2、子盒子已知宽度

效果图

html代码

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

实现方法

① margin: 0 auto;

<style>
body{
        background-color: lightgoldenrodyellow;
    }
    .div1{
        background-color: cyan;
    }
    .div2{
        width: 200px;
        height: 100px;
        margin: 0 auto;
        background-color: rgb(132, 247, 65);
        color: white;
    }
</style>

② position定位＋margin-left

<style>
    body{
        background-color: lightgoldenrodyellow;
    }
    .div1{
        position: relative;
    }
    .div2{
        width: 200px;
        height: 100px;
        position: absolute;
        left: 50%;
        /* margin-left: 负的一半宽度width */
        margin-left: -100px;
        background-color: rgb(132, 247, 65);
        color: white;
    }
</style>

3、子盒子有无宽度均适用

效果图

html代码

<body>
    <div class="div1">
        <div class="div2">居中</div>
    </div>
</body>

实现方法

① position定位 + transform

<style>
    body{
        background-color: rgb(238, 197, 203);
    }
    .div1{
        position: relative;
    }
    .div2{
        position: absolute;
        left: 50%;
        /* 使用transform在X轴方向移-50%，无需根据宽度计算 */
        transform: translateX(-50%);
        background-color: rgb(145, 212, 235);
        font-size: 40px;
    }
</style>

② flex布局

<style>
    body{
        background-color: rgb(238, 197, 203);
    }
    .div1{
        display: flex;
        justify-content: center;
    }
    .div2{
        background-color: rgb(145, 212, 235);
        font-size: 40px;
    }
</style>

垂直居中

1、行内元素

设置line-height与父级元素的height相等

效果图：

代码：

<style>
    .div1{
        height: 400px;
        background-color: aquamarine;
    }
    .div2{
        width: 200px;
        height: 200px;
        line-height: 400px;     /*设置line-height与父级元素的height相等*/
        font-size: 30px;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">垂直居中</div>
    </div>
</body>

2、子盒子已知高度

效果图

html代码

<body>
    <div class="div1">
        <div class="div2">垂直居中</div>
    </div>
</body>

实现方法

① position定位+ margin-top

<style>
    .div1{
        height: 400px;
        background-color: aquamarine;
        position: relative;
    }
    .div2{
        width: 250px;
        height: 200px;
        background-color: coral;
        position: absolute;
        top: 50%;
      /* margin-top: 负的一半高度height */
        margin-top: -100px;
        line-height: 200px;
    }
</style>

3、子盒子有无高度均适用

效果图

html代码

<body>
    <div class="div1">
        <div class="div2">垂直居中</div>
    </div>
</body>

实现方法

① 父盒子CSS样式设置伪类元素

基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

<style>
    .div1 {
        height: 400px;
        background-color: rgb(177, 236, 247);
    }
    .div1::after{
        content:'';
        height:100%;
        display:inline-block;
        vertical-align:middle;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        display:inline-block;
        vertical-align:middle;
        line-height: 200px;
    }
</style>

② position + transform

<style>
    .div1{
        height: 400px;
        background-color: rgb(177, 236, 247);
        position: relative;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        line-height: 200px;
    }
</style>

③ flex布局

<style>
    .div1{
        height: 400px;
        background-color: rgb(177, 236, 247);
        display: flex;
        align-items: center;
    }
    .div2{
        width: 250px;
        background-color: rgb(219, 166, 166);
        line-height: 200px;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">垂直居中</div>
    </div>
</body>