16种css水平垂直居中方法以及应用（文字、图片）
一、垂直居中
1、行内元素

基本思想：单行文本子元素line-height 值为父元素 height 值

.parent {
    height: 200px;
}

.son {
    line-height: 200px;
}
2、块级元素
2.1行内块级元素

基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央

兼容性：支持IE7

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}
2.2table布局

兼容性：支持IE6/IE7，IE8无效

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}
2.3flex弹性布局

2009版写法

兼容性：不支持IE

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}

2012版写法

兼容性：IE8/IE9不支持

.parent{
  display:flex;
  justify-content:center;
}
.son{
  align-self:center;
}
2.4绝对定位+transform:translate(-50%,-50%)
.parent{
  position:relative;
}
.son{
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
二、水平居中
1、行内元素

基本思想：父元素设置text-align: center即可实现行内元素水平居中

.parent {
    text-align: center;
}
2、块级元素
2.1一般居中

基本思想：该元素设置margin:0 auto

.son {
    margin: 0 auto;
}
2.2子元素含float

基本思想：子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin，fit-content是css3的新属性值

.parent{
    width:fit-content;
    margin:0 auto;
}

.son {
    float: left;
}
2.3 flex弹性布局

2009版本写法

.parent{
    display:box;
    box-orient:horiaontal;
    box-pack:center;
}

2012版写法

.parent{
    display:flex;
    justify-content:center;
}
2.4绝对定位
  • transform
.son{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}
  • 负值margin-left
.son{
    position:absolute;
    with:固定宽度
    left:50%;
    margin-left:-0.5*固定宽度;
}
  • left:0;right:0;margin:0 auto
.son{
    position:absolute;
    width:固定宽度;
    left:0;
    right:0;
    margin:0 auto;
}
三、具体应用–文字居中
3.1css如何设置文字水平居中

基本思想：css使用text-align规定水平对齐方式，影响一个元素的文本行相互的对齐方式。center值设置文本居中

注意：text-align应用与容器，针对容器里面的文字以及容器里面的display:inline/inline-block，若是display:block无影响

text-align具备向下传递的特点，设置一个div，div里面的也会居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 80px;
            background: rgb(228, 178, 187);
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">css 水平居中了--文本文字</div>
</body>

</html>

在这里插入图片描述

3.2css如何设置文字垂直居中
  • 单行文本：基本思想是行高（line-height）和所在区域高度（height）设置一致
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 80px;
            background: rgb(228, 178, 187);
            line-height: 80px;
        }
    </style>
</head>

<body>
    <div class="box">css 垂直居中--单行文本</div>
</body>

</html>

在这里插入图片描述

  • 多行文本

（1）当父级元素高度不固定

当父级元素不固定，会随着内容变化，高度只能通过文本的高度来撑开，所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            margin: 50px auto;
            background: rgb(228, 178, 187);
            padding-top: 50px;
            padding-bottom: 50px;
            padding-right: 20px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div class="box">css 垂直居中--多行文本--父级高度不固定</div>
</body>

</html>

在这里插入图片描述

（2）当父级元素高度固定

vertical-align:middle +display:table-cell

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            background: rgb(228, 178, 187);
            vertical-align: middle;
            display: table-cell;
        }
    </style>
</head>

<body>
    <div class="box">css 垂直居中--多行文本--父级高度固定</div>
</body>

</html>

在这里插入图片描述

四、具体引用–图片居中
4.1display：table

基本思想：最外层div display: table+img父元素display: table-cell、vertical-align: middle

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background: rgb(228, 178, 187);
            display: table;
        }

        #imgbox {
            display: table-cell;
            vertical-align: middle;
        }

        #imgbox img {
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </div>
</body>

</html>

在这里插入图片描述

思考：如何在图片垂直居中基础上+水平居中

基本思想：最外层div text-align: center（具有向下传递的特点）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background: rgb(228, 178, 187);
            display: table;
            text-align: center;/*增加的一行代码*/
        }

        #imgbox {
            display: table-cell;
            vertical-align: middle;
        }

        #imgbox img {
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </div>
</body>

</html>

在这里插入图片描述

4.2flex实现

基本思想：display: flex;align-items: center

兼容性：不是最好的选择，IE8/IE9不支持

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .imgbox {
            width: 300px;
            height: 200px;
            background: rgb(228, 178, 187);
            display: flex;
            align-items: center;
        }

        .imgbox img {
            width: 150px;
            height: 100px;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="imgbox">
        <img src="1.jpg" alt="图片1">
    </div>
</body>

</html>

在这里插入图片描述

4.3绝对定位

基本思想：img父元素相对定位position: relative+子元素绝对定位position: absolute，img的top设置为50%，负值margin-top（这个是想实现垂直居中元素高度的一半），不确定高度用transform:translateY(-50%)

兼容性：推荐写法，兼容性好

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .imgbox {
            width: 300px;
            height: 200px;
            background: rgb(228, 178, 187);
            position: relative;
            margin: 0 auto;
        }

        .imgbox img {
            width: 150px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="imgbox">
        <img src="1.jpg" alt="图片1">
    </div>
</body>

</html>

在这里插入图片描述

# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟