CSS居中技巧解析-优快云博客

本文链接：https://blog.youkuaiyun.com/hutongxue434/article/details/107251736

本文总结了CSS中常见的居中方法，包括行内元素水平居中、定宽块状元素水平居中、已知宽高及未知宽高的块状元素实现水平垂直居中。详细介绍了各种情况下的CSS代码实现，并提供了示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近经常遇到居中的问题，于是在查找资料后把它们整理了下来和大家分享。
首先居中分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。

一、行内元素水平居中

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。
例如：

<!--CSS代码-->
<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{
	text-align:center;
}
.imgCenter {
    text-align:center;
}
</style>

<!--html代码-->
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter"><img src="xxxx.jpg" /></div>
</body>

二、定宽块状元素水平居中

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<!--CSS代码-->
<style>
.father{
    border:1px solid red;
	width:300px;
}
.center{
    border:1px solid red;
	width:200px;
	margin:30px auto;
}
</style>

<!--html代码-->
<body>
    <div class="father"><div class="center">我是定宽块状元素，我要水平居中显示。</div></div>
</body>

三、已知宽高实现盒子水平垂直居中

实现子元素相对于父元素垂直水平居中：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

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

<head>
    <meta charset="UTF-8">
    <title>已知宽高实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 400px;
        width:400px;
        position:relative;
    }

    .box1 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        position:absolute;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
    }
    .box2 {
        width: 20px;
        height: 20px;
        border: 1px solid black;
        position:absolute;
        top:50%;
        left:50%;
        margin:-10px 0 0 -10px;
    }
    .box3 {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        position:absolute;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
        	<div class="box2">
        		<div class="box3">
        		</div>
        	</div>
        </div>
    </div>
</body>

</html>

效果如图：
在这里插入图片描述

四、未知自身宽高实现水平垂直居中

通过translate(-50%,-50%) ，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。
要点：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

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

<head>
    <meta charset="UTF-8">
    <title>宽高不定实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }

    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴啊巴
        </div>
    </div>
</body>

</html>