CSS3 实现元素全方位居中技巧-CSDN博客

本文详细介绍了使用CSS3实现元素水平居中、垂直居中以及各种复杂情况下的居中方法，包括行高垂直居中法、内、外边距法、定位加外边距法、定位加位移法和弹性盒子居中法，覆盖了不同场景下的居中需求。

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

元素水平居中

text-align: center;：设置行内元素、行内块级元素水平居中

margin: 0 auto;：设置块级元素水平居中

行高垂直居中法

适用于单行，有父元素有固定高度

line-height: 300px;：设置行内元素和行内块级元素垂直居中

内、外边距居中法

适用于父元素有固定高度

方法一：内边距法（设置给父元素）

水平居中：设置左内边距=（父元素宽度-自元素宽度）/ 2
垂直居中：设置上内边距=（父元素高度-自元素高度）/ 2

方法二：外边距法（设置给子元素；注意外边距击穿）

水平居中：设置左外边距=（父元素宽度-自元素宽度）/ 2
垂直居中：设置上外边距=（父元素高度-自元素高度）/ 2

定位加外边距居中法

适用于父元素没有具体尺寸，子元素有具体尺寸

父元素设置相对定位：position:relative;
子元素设置绝对定位：position:absolute; top:50%; left:50%;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        html,body{height: 100%;}
        #box{
            width: 50%; height: 50%;
            margin: 0 auto; background: bisque;
            position: relative;
        }
        .zxw{
            background: red;
            width: 300px; 
            height: 100px;

            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -50px;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <div class="zxw"></div>
    </div>
</body>
</html>

定位加外边距自适应居中法

适用于父元素、子元素都没有具体尺寸

父元素设置相对定位：position:relative;
子元素设置绝对定位：position:absolute; top:0; left:0; bottom:0; right:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        html,body{height: 100%;}
        #box{
            width: 50%; height: 50%;
            margin: 0 auto; background: bisque;
            position: relative;
        }
        .zxw{
            background: red;
            width: 50%; 
            height: 50%;

            position: absolute;
            top: 0; left: 0;
            bottom: 0; right: 0;

            margin: auto;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <div class="zxw"></div>
    </div>
</body>
</html>

定位加位移居中法

适用于所有元素类型的父、子元素都没有具体尺寸

父元素设置相对定位：position:relative;
子元素设置绝对定位：position:absolute; left:50%; top:50%;
子元素位移自身尺寸的一半： transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        html,body{height: 100%;}
        #box{
            width: 50%; height: 50%;
            margin: 0 auto; background: bisque;
            position:relative
        }
        .zxw{
            background: red;
            /* width: 50%; 
            height: 50%; */

            position: absolute;
            left: 50%; top: 50%;
            /* 水平位移自己宽度的一半 */
            /* transform: translateX(-50%); */
            /* 水平位移自己高度的一半 */
            /* transform: translateY(-50%); */

            transform: translate(-50%, -50%);
        }
        
    </style>
</head>
<body>
    <div id="box">
        <!-- <div class="zxw"></div> -->
        <span class="zxw">hhh</span>
    </div>
</body>
</html>

弹性盒子居中法

终极方法；适用于所有元素类型的父、子元素都没有具体尺寸

父元素设置成弹性盒子：display:flex;
父元素设置主轴方向居中对齐：justify-content:center;
父元素设置交叉轴方法居中对齐：align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        html,body{height: 100%;}
        #box{
            width: 50%; height: 50%;
            margin: 0 auto; background: bisque;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .zxw{
            background: red;
            width: 50%; 
            height: 50%;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <!-- <div class="zxw"></div> -->
        <!-- <span class="zxw">hhh</span> -->
        <img class="zxw" src="../img/timg.png" alt="">
    </div>
</body>
</html>