CSS实现水平垂直居中

宋小羽 • 1天前 • HTML&CSS • 5 阅读

水平居中

若是行内元素，设置其父元素 text-align: center;
若是块级元素，该元素设置 margin: 0 auto;
使用flex 布局，父元素设置为 display: flex; justify-content: center;
使用 transform 属性，设置父元素 position: relative; ，子元素 position: absolute; left: 50%; transform: translate(-50%, 0)
使用绝对定位且宽度固定，子元素设置为负值的 margin-left值
如果元素为绝对定位，设置父元素 postion: relation;，该元素设置为 left: 0; right: 0; margin: auto;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>CSS居中方法</title>
    <style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: #eee;

            /* 第二种：块级元素 */
            /* margin: 0 auto; */

            /* 第三种：flex布局 */
            /* display: flex;
            justify-content: center; */

            position: relative;
        }
        .son {
            /* 第一种：行内元素 */
            /* text-align: center; */

            /* 第四种：transform属性 */
            /* position: absolute;
            left: 50%;
            transform: translate(-50%, 0); */

            /* 第五种：固定宽度 */
            /* position: absolute;
            width: 160px;
            left: 50%;
            margin-left: -80px;
            text-align: center; */

             /* 第六种：固定宽度 */
            position: absolute;
            width: 160px;
            text-align: center;
            left:0;
            right: 0;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="son">这是一段文字</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS居中方法</title>

<style>

.parent {

width: 400px;

height: 400px;

background-color: #eee;

/* 第二种：块级元素 */

/* margin: 0 auto; */

/* 第三种：flex布局 */

/* display: flex;

justify-content: center; */

position: relative;

}

.son {

/* 第一种：行内元素 */

/* text-align: center; */

/* 第四种：transform属性 */

/* position: absolute;

left: 50%;

transform: translate(-50%, 0); */

/* 第五种：固定宽度 */

/* position: absolute;

width: 160px;

left: 50%;

margin-left: -80px;

text-align: center; */

/* 第六种：固定宽度 */

position: absolute;

width: 160px;

text-align: center;

left:0;

right: 0;

margin: 0 auto;

}

</style>

</head>

<body>

<div class="son">这是一段文字</div>

</div>

</body>

</html>

垂直居中

单行文本

若元素是单行文本，则可设置该元素的 line-height 等于父元素高度。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>CSS居中方法</title>
    <style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: #eee;
        }
        .son {
            line-height: 400px;
        }

    </style>
</head>
<body>
    <div class="parent">
        <span class="son">这是一段文字</span>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS居中方法</title>

<style>

.parent {

width: 400px;

height: 400px;

background-color: #eee;

}

.son {

line-height: 400px;

}

</style>

</head>

<body>

<span class="son">这是一段文字</span>

</div>

</body>

</html>

元素高度不定

将父元素显示方式设置为表格 display: table; ，子元素设置 display: table-cell; vertial-align: middle
使用 flex 布局，设置父元素 display: flex; align-center: center;
使用 transform 属性，设置父元素 position: relative; ，子元素 position: absolute; top: 50%; transform: translate(0, -50%)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>CSS居中方法</title>
    <style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: #eee;

            /* 第一种 table */
            /* display: table; */

            /* 第二种 flex */
            /* display: flex;
            align-items: center; */

            /* 第三种 transform */
            position: relative;
        }
        .son {
            /* 第一种 table */
            /* display: table-cell;
            vertical-align: middle; */

            /* 第三种 transform */
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="son">这是一段文字</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS居中方法</title>

<style>

.parent {

width: 400px;

height: 400px;

background-color: #eee;

/* 第一种 table */

/* display: table; */

/* 第二种 flex */

/* display: flex;

align-items: center; */

/* 第三种 transform */

position: relative;

}

.son {

/* 第一种 table */

/* display: table-cell;

vertical-align: middle; */

/* 第三种 transform */

position: absolute;

top: 50%;

transform: translate(0, -50%);

}

</style>

</head>

<body>

<div class="son">这是一段文字</div>

</div>

</body>

</html>

元素高度固定

绝对定位固定高度时，设置子元素为 top: 50%;，margin-top 为一半高度的负值
绝对定位固定高度时，设置子元素为 top: 0; bottom: 0; margin: auto 0;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>CSS居中方法</title>
    <style>
        .parent {
            width: 400px;
            height: 400px;
            background-color: #eee;

            position: relative;
        }
        .son {
            background-color: red;
            position: absolute;
            height: 100px;
            /* 第一种 */
            /* top: 50%;
            margin-top: -50px; */

            /* 第二种 */
            bottom: 0;
            top: 0;
            margin: auto 0;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="son">这是一段文字</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS居中方法</title>

<style>

.parent {

width: 400px;

height: 400px;

background-color: #eee;

position: relative;

}

.son {

background-color: red;

position: absolute;

height: 100px;

/* 第一种 */

/* top: 50%;

margin-top: -50px; */

/* 第二种 */

bottom: 0;

top: 0;

margin: auto 0;

}

</style>

</head>

<body>

<div class="son">这是一段文字</div>

</div>

</body>

</html>

总结

水平居中的方法较为简单，一般情况下使用 text-align: center 和 margin: 0 auto 即可。

我们发现，flex 布局、transform 属性和绝对定位几种方法同时适用于水平和垂直居中。

这些信息可能会帮助到你：关于我们 | 侵权删除 | 捐赠支持

优惠推广：外卖红包天天领，下单享省钱福利～
文章名称：CSS实现水平垂直居中
文章链接：https://www.bysjb.cn/css-center.html

THE END

二维码

打赏

CSS中块级元素、行内元素和行内块元素区别

< <上一篇

CSS实现水平垂直居中

下一篇>>

搜索内容

CSS实现水平垂直居中

水平居中

垂直居中

单行文本

元素高度不定

元素高度固定

总结

取消回复

共有 0 条评论

搜索

目录