【CSS】常用的水平、垂直居中以及居中布局的方法（对内容有具体分析）

前言

前面我总结过一篇关于几种水平和垂直居中方法的文章，可以知道，实现水平居中和垂直居中的方法真的是数不清，但是各自都会有各自的优缺点，想要在实际的应用当中去正确的使用这些方法，就要靠平时的积累，熟悉掌握几种就可以应付绝大部分的居中问题。最近我又学习到了几种神奇的方法，这就来分享一下。

正文

水平居中的方法

• text-align + display:inline-block属性配合使用。
• table + margin属性配合使用
• absolute + transform属性配合使用

方法一、text-align + display:inline-block

#parent{
    
    text-align: center;}
#child{
    
    display: inline-block;}

我们先创建一个普通样式

<style type="text/css">
	#parent{
     
     
		width: 100%;
		height: 200px;
		background: pink;
	}
	#child{
     
     
		width: 200px;
		height: 200px;
		background: #987;
	}
</style>

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

这时候显示的效果就是这样的

我们再在样式上添加两个属性

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;

	text-align: center;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;

	display: inline-block;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

这时候就水平居中了

那我们来分析一下，为什么要用这两个属性呢？为什么要用inline-block而不用inline呢？

• text-align属性：是为文本内容设置对齐方式
  left：左对齐
  center：居中对齐
  right：右对齐
  那这时候你会产生疑问？这个属性最初知识对文本起作用，那为什么这个时候对div元素也起作用呢？关键就在于，为子级元素设置了display属性，值为inline-block。

display属性有常见的几个属性：
block：块级元素
inline：内联元素
width和height属性就会失效
inline-block：行内块级元素（块级+ 内联）
width和height属性有效

当子级元素是一个内联元素的时候，那text-align就会有效。
inline-block使用的是内联元素的特点，
为什么不把子级元素的display属性设置成inline呢？因为内联元素会有一个自身的问题，当我们把某一个元素的inline内联元素时，其中的chlid的width和height属性就会失效。可以试试inline的效果。

所以我们使用inline-block是为了让child的width和height属性都有效，才能达到我们想要的效果。

优点与缺点

• 优点：浏览器兼容性比较好，对于IE浏览器6-9版本，text-align和inline-block都支持。
• 缺点：text-align属性具有继承性，导致子级元素的文本也是居中显示。（解决，在子元素复原text-align的属性）

如果子级元素的文本是不需要居中的，那就要对它进行处理，在子级元素中设置text-align的值为left就可以覆盖掉父级元素的text-align属性值，

方法二、table + margin属性配合使用

.child{
    
    
	dispaly: table;
	margin: 0 auto;
}	

在第一种方法的普通样式中添加关键css内容

扫描二维码关注公众号，回复： 12981507 查看本文章

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

实现的是相同的效果
分析
margin：

1. 设置为一个值，表示上右下左都相同。
2. 设置为两个值，第一个表示上下，第二个表示左右。
3. 设置为三个值，第一个表示上，第二个表示左右，第三个表示下。
4. 设置为四个值，上 右 下 左。

设置margin: 0 auto; 其中 auto表示的是根据浏览器自动分配。因此浏览器会等分左右外边距

display: table;：
将display设置成block也可以得到同样的效果，但是内联样式inline就会让child的宽高失效。因此display可设置成两个值：table、block。

优点与缺点

• 优点：只需要对子级元素进行设置就可以实现水平方向居中显示
• 缺点：
  如果子级元素脱离文档流，导致margin属性的值失效。
  所谓的元素脱离文档流，可能的情况就是子级元素设置为以下三种情况就会让margin属性的值失效
  • position: absolute;
  • position: fixed;
  • float: left/right

方法三、absolute + transform属性配合使用

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

使用普通样式加上以上属性

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

分析
position: absolute;
当前元素设置为绝对定位后：

• 如果父级元素没有定义定位的话，当前元素是相对于页面定位
• 如果父级元素开启了定位的话（非定位static下），当前元素是相对于父级元素定位。

left: 50%;
子级元素相对于父级元素的左边距离是50%；

transform: translateX(-50%);
子级元素往左边移动子级元素宽度的一半。transform表示平移，translateX()表示水平平移。

优点与缺点

• 优点：父级元素是否脱离文档流，不影响子级元素水平居中效果。
• 缺点：transform属性是CSS3中新增的属性，浏览器支持情况不好。

垂直居中的方法

说完水平居中的方法，下面来介绍两种常见的垂直居中的方案。有以下两种常见的方式。

• table-cell + vertical-algin属性
• absolute + transform属性配合使用

方法一、table-cell + vertical-algin配合使用

方法一中的关键代码

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

普通样式修改成以下形式：

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

添加上述关键代码。

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

效果如下：

分析
vertical-align: middle;
用于设置文本内容的垂直方向对齐方式，其中vertical-align的值有以下三种：

• top：顶部对齐
• middle：居中对齐
• bottom：底部对齐
  display: table-cell;
  table-cell的作用，其中table是设置当前元素为<table>元素，table-cell是设置当前元素为<td>元素（单元格）

将两个核心要素整合在一起就可以实现居中效果，当我们把父级元素的display属性设置为table-cell就相当于把父级元素设置成表格中的单元格，单元格的内容是可以由两种方式对齐的，一种是水平对齐，另一种是垂直对齐，作为子级元素的div就相当于单元格里面的内容，最终呈现出垂直居中的效果。

优点与缺点

• 优点：浏览器的兼容性比较好（主要还是针对老版本的浏览器，因为使用的table-cell以及vertical-algin属性都是属于CSS2 版本的内容，而CSS2的对老版本的浏览器兼容性是比较好的）
• 缺点：vertical-algin属性具有继承性，导致父级元素的文本也是居中显示的。

在父级元素中添加文本内容，这个内容也会呈现居中显示。

方法二、absolute + transform属性配合使用

关键代码

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

实现

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

<div id="parent">
	<div id="child">
		垂直居中
	</div>
</div>

此部分与水平居中的第三种档案类似，在此可参考上面。

居中布局

其实这个就是垂直与水平方法进行整合。

• table + margin 实现水平方向居中，table-cell + vertical-algin实现垂直方向居中。
• absolute + transform 实现水平方向和垂直方向的居中显示。

方法一：table + margin 实现水平方向居中，table-cell + vertical-algin实现垂直方向居中

#parent{
    
    
	width: 400px;
	height: 400px;
	background: pink;
	
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		居中布局
	</div>
</div>

第一种解决方案的优缺点
缺点：
我们可以知道parent中table-cell其实是<td>变成了父级元素，而child中的table值是<table>却变成了子级元素，所以这里需要进行改进。
将子级元素的display属性值修改为block实现同样效果，这样也解决了语块的问题。

#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: block;
	margin: 0 auto;
}

优点：浏览器兼容性比较好。

方法二：absolute + transform 实现水平方向和垂直方向的居中显示

关键代码

#parent {
    
    
	position: relative;
}

#child {
    
    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

很好理解，就是结合水平和垂直的居中方法，通过定位属性进行居中，

实现代码

#parent {
    
    
	width: 400px;
	height: 400px;
	background: pink;

	position: relative;
}

#child {
    
    
	width: 200px;
	height: 200px;
	background: #987;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

优点与缺点
缺点：兼容性比较差
优点：可以适用比较多的场景，方法好

总结

并没有哪个解决方案是最优的，我们需要根据实际的应用场景实现相同的效果。