CSS - 居中布局常用方法_css position 居中

文章是从有道云笔记转到csdn博客，如果存在图片丢失问题，可阅读原文

居中布局在CSS中是一个很蛋疼的老问题，相信每位在刚刚入门的时候很烦恼，网上也有很多关于居中布局的文章，由于每个人场景不同可能很难选择一个自己适合的方法。

今天总结下，会以打分的方式来排名，总分是5分

Flex弹性盒子方法

分数：5分

为什么把Flex放在第一呢，无论是水平居中还是垂直居中、单行、多行、高度未知等等条件flex都可以很好的适应解决这些问题，适用性是最强的。

使用flex布局实现居中，重点在于justify-content与align-items这两个属性。

单行居中

HTML

<div class="container">
			<div class="item">广州</div>
</div>
1
2
3

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				<!--水平居中-->
				justify-content: center
				<!--垂直居中-->
				align-items: center;
				
}
			
.item{
                <!--文本居中-->
			    text-align: center;
			    background-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

多行居中

HTML

<div class="container">
			<div class="item">广州</div>
			<div class="item">深圳</div>
			<div class="item">北京</div>
</div>
1
2
3
4
5

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				
}
1
2
3
4
5
6
7
8
9
10

多列居中

HTML

<div class="container">
			<div class="item">广州</div>
			<div class="item">深圳</div>
			<div class="item">北京</div>
</div>
1
2
3
4
5

CSS

.container{
				width: 200px;
				height: 100px;
				background-color: aqua;
				display: flex;
				flex-wrap: row wrap;
				<!--水平等比平分-->
				justify-content: space-evenly;
				<!--垂直居中-->
				align-items: center;
				
			}
			
.item{
				background-color: red;
				text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

position + transform方法

分数：4分

优点：position + transform方法可以很好解决在子元素未知宽高的情况需要实现居中的问题，同样的也适合宽高已知的情况下。可以满足水平和垂直方向的居中。

缺点：子元素使用了绝对定位，会脱离文档流，所有的子元素都会重叠，需要特别注意，不能多行居中。

在父元素使用相对定位（relative），在子元素中使用决对定位（absolute），同时使用left与top让子元素相对父元素偏移50%，接着通过transform让子元素向左与上自身偏移50%，最后达到居中效果。

HTML

<div class="container">
			<div class="child">广州</div>
</div>
1
2
3

CSS

.container{
				width: 50%;
				height: 30%;
				background-color: aqua;
				position: relative;
				
}
			
.child{
				background-color: red;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

margin

分数：3分

使用margin：0 auto只能水平居中，但前提需要知道子元素的宽度，另外对垂直居中是无能为力的。只能对块级子元素才能起作用。

HTML

<div class="container">
			<div class="child">广州</div>
</div>
1
2
3

CSS

.child{
                <!--必须设置子元素的宽度-->
				width: 50%;
				background-color: red;
				text-align: center;
				<!--在子元素上设置-->
				margin: 0 auto;

}
1
2
3
4
5
6
7
8
9

text-align

分数：2分

text-align只能作用于行内元素的居中，对块级元素是不起作用的。通常下在块级元素上设置text-align，让块级元素内的行内元素居中。

HTML

<div class="container">
			<span>广州</span>
</div>
1
2
3

CSS

.container{
				width: 200px;
				background-color: aqua;
				text-align: center;
				padding: 10px;
				
}
1
2
3
4
5
6
7

总结

网上还有很多关于居中的方案写的很详细，正因为方案太多，有时候会给我你带来选择困难，不知道哪种更合适。上面四种居中方案我觉得适应80%以上常用场景，在开发中已经足够了。

• Flex布局
• position + transform
• margin: 0 auto
• text-align

Flex布局 与 position + transform 对父元素的宽高与子元素的类型（块级、行内）没有特殊要求，建议优先选择。

如果父元素是块级元素，子元素是行内元素（比如文本标签、超链接等），可以选择text-align居中。如果有felx布局就有点大材小用了。

有时候合理的使用padding、margin属性也可以达到居中的效果。

参考

• CSS居中完整指南
• CSS - Flex弹性布局笔记