随笔 - 118  文章 - 0 评论 - 341 阅读 - 299万
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

CSS 水平居中与垂直居中

前言

在CSS布局中，水平居中与垂直居中一直是用到比较多的，在本篇中将介绍水平居中、垂直居中的几种方式。

示例

HTML：

?
1
2
3
<div class="parent">
    <div class="child"></div>
</div>

　　

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
12
.parent {
    width: 200px;
    height: 100px;
    position: relative;
    background-color: #374858;
}
 
.parent .child {
    width: 100px;
    height: 50px;
    background-color: #9dc3e6;
}

　　

效果：

 

1. 水平居中

这里将分别介绍当子元素的样式为内联、块级以及绝对定位时的水平居中布局方案。

 

1.1 子元素为内联样式

说明：当子元素为内联样式时(display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性)，只需要设置父元素的text-align: center。

CSS：

?
1
2
3
4
5
6
7
8
9
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    text-align: center;
}
.parent .child {
    display: inline-block;
}

 

1.2 子元素为块级样式

说明：父元素和子元素都是块级元素时，设置子元素的margin: 0 auto即可。

注意：此时的子元素需要设置width。

CSS：

?
1
2
3
4
5
6
7
8
9
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {}
 
.parent .child {
    display: block;
    margin: 0 auto;
}

 

1.3 子元素 position: absolute

CSS：

?
1
2
3
4
5
6
7
8
9
10
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {}
 
.parent .child {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

 

1.4 父元素 display: flex

说明：此时子元素可为内联、块级元素。

浏览器支持：IE 11。

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
12
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    display: flex;
    justify-content: center;
}
 
.child {
    display: inline;
    margin: 0 auto;
}

　　

2. 垂直居中

同水平居中一样，这里也将分别介绍当子元素的样式为内联、块级以及绝对定位时的垂直居中布局方案。

2.1 子元素为块级元素

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    display: table-cell;
    vertical-align: middle;
}
 
.parent .child {
    display: block;
}

 

2.2 子元素 position: absolute

CSS：

?
1
2
3
4
5
6
7
8
9
10
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {}
 
.parent .child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

 

2.3 父元素 display: flex

说明：此时子元素可为内联、块级元素

浏览器支持：IE 11。

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    display: flex;
    align-items: center;
}
 
.parent .child {
    display: inline;
}

 

3. 水平居中+垂直居中

3.1 子元素 display: inline-block

说明：设置子元素的display: inline-block。

注意：此时的子元素需要设置width和height。

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
12
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
 
.parent .child {
    display: inline-block;
}

 

3.2 子元素 position: absolute

说明：此时的子元素为绝对定位。

CSS：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    position: relative;
}
 
.parent .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 

3.3 父元素 display: flex

浏览器支持：IE 11。

CSS：

?
1
2
3
4
5
6
7
8
9
10
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
 
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.parent .child {}

 

End
Web开发之路系列文章
posted on   FangMu  阅读(7080)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
Copyright © 2025 FangMu
Powered by .NET 9.0 on Kubernetes Powered by: 博客园
前言
1. 水平居中
1.1 子元素为内联样式
1.2 子元素为块级样式
1.3 子元素 position: absolute
1.4 父元素 display: flex
2. 垂直居中
2.1 子元素为块级元素
2.2 子元素 position: absolute
2.3 父元素 display: flex
3. 水平居中+垂直居中
3.1 子元素 display: inline-block
3.2 子元素 position: absolute
3.3 父元素 display: flex
1
0
TOP
点击右上角即可分享
微信分享提示
AI IDE Trae