CSS中实现元素水平居中、垂直居中的6个方法（详解）

原创 2023-10-01 19:56:09 7.8w 阅读 AI写同款

收录于

web前端基础

快一点要开始了

码龄5年墨衍会员 · AI 创作全网分发

28粉丝30篇原创

关注

Html css水平居中+垂直居中+水平垂直居中的方法总结（1）块级元素（如div）：独占一行，不和其他元素在一起，可以设置宽和高；当没设置宽和高时，宽度和父级宽度一样，高度由内容的高度决定；当设置宽和高时，元素的宽高就是设置值，当内容超过宽高值时，元素宽高值也不变高，会溢出。（2）行级元素（如span）：不会独占一行，和其它元素在一起，不可以设置宽和高，由里面的内容决定；设置的宽高无效。（3）行内块级元素（如img）：不会独占一行，可以和其它元素在一起，可以设置宽和高；当没设置宽和高时，宽高有元素内容决定；当设置宽和高时，元素内容宽高为设置值。阅读详情

AI摘要

本文主要介绍了CSS实现水平与垂直居中的多种方法。水平居中包括使用text-align:center对文本、行内元素等生效；margin:0 auto对块元素生效；以及用position和transform实现。垂直居中则有line-height适用于文本等元素、flex布局适用于所有元素，还有使用position和transform的方法。

一、水平居中

1、text-align：center；

2、margin：0 auto；

3、使用position和transform

二、垂直居中

1、line-height

2、flex布局

3、使用position和transform

一、水平居中

1、text-align：center；

对文本元素设置水平居中

案例：给一个宽为400px高为200px的div盒子，盒子里面放置了块元素div、行内元素span、行内块元素input。现在，我们给这个盒子添加一个css样式：text-align:center。

HTML结构：

    <div class="box">
        <div class="div1">文本 div1</div>
        <span>文本 span</span>
        <div class="div2">文本 div2</div>
        <input type="text">
    </div>

CSS样式：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 200px;
            background-color: rebeccapurple;
            text-align: center; /*给父元素设置text-align*/
        }

        div {
            background-color: #918a8a;
        }

        .div2 {
            width: 200px;
        }

        span {
            background-color: palegoldenrod;
        }
    </style>

下图是实现结果，我们看到，span标签和input标签均实现水平居中；看到div1你可能以为它水平居中，但是从div2中可以发现，div标签并没有实现水平居中，只是里面的文字水平居中了。不难总结出：text-align对文本、行内元素、行内块元素生效，对块元素却是无效的。

不过，有个疑问的地方，虽然div标签没有水平居中，但是div标签里面的文字却是水平居中的，为什么呢？原来是因为css具有继承性，div标签继承到了父元素的text-align属性，使得div内部的文本对div水平居中。

2、margin：0 auto；

对块元素实现水平居中。

实现原理：块级元素在水平方向上具有满屏特性，表现为水平方向上占满整个父容器的宽度，所以，当水平方向上padding、border，width都是定值时，margin左右外边距设置为auto，默认会由margin左右平分剩余空间。从而达到水平居中效果。

比如下面这个例子：

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 200px;
            background-color: rebeccapurple;
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: palegoldenrod;
            margin: 0 auto;
        }
    </style>

我们设置了一个宽400的div父盒子，一个宽200的div子盒子，给子盒子添加了一个margin：0 auto；的样式。如下图2所示，我们可以看到子盒子在父盒子中实现了水平居中。我们在浏览器中查看它的盒子模型（图1），可以明确发现，子盒子的左右margin值为100，正是父盒子宽度减去子盒子border+padding+width后( （400-200）/2=100 )的宽度，以此成功实现水平居中。

图1

图2

3、使用position和transform

position: absolute;

left: 50%;

transform: translateX(-50%);

实现原理： position: absolute;给元素设置绝对定位，left: 50%;让其距离左边偏移父元素的50%，然后通过 transform: translateX(-50%);让其向左平移自身宽度的50%，从而实现一个水平居中的效果。

下图是实现原理的一个过程图：

完整案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 200px;
            background-color: rebeccapurple;
            position: relative;
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: palegoldenrod;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>