CSS居中解决方案

[wolfdu]

https://wolfdu.fun/post?postId=5a636157b890b156d0fae643

水平居中的实现有很多中方式，所以整理一个小实验记录学习过程

水平居中

行内元素

如果这个元素是一个行内元素，我们只需要在其父元素上加上text-align: center即可达到水平居中的效果了。
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。

块级元素

块级元素的居中我们只需要设置margin-left和margin-right为auto就可以实现了（当然前提是元素已经设置了宽度否则元素会与父元素同宽看不到效果）。

形如：

.center {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}	

这应该是我们最常见的居中的样式了，但是前提是设置了相应的宽度，那么当元素不设置宽度如何解决这个问题呢？

我们通过解决一个分页的水平居中来整理块级元素的水平居中解决方案

<div class="pagination">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">Next</a></li>
      </ul>
</div>

CSS基础样式：

.pagination li {
	line-height: 25px;
}
.pagination a {
	display: block;
	color: #f2f2f2;
	text-shadow: 1px 0 0 #101011;
	padding: 0 10px;
	border-radius: 2px;
	box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
	background: linear-gradient(#434345,#2f3032);
}
.pagination a:hover {
	text-decoration: none;
	box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
	background: linear-gradient(#f48b03,#c87100);
}

此时看到的效果应该是这个样子的：

我们最终要达到的样式是水平居中，展示如下：

正式进入解决方案：

1 margin&width实现水平居中方案

这个方案也就是我们最常见的做法，通过个元素设置一个宽度，通过margin auto来实现居中。

.pagination {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}  
.pagination li {
	line-height: 25px;
	display: inline;
	float: left;
	margin: 0 5px;
}
.pagination a {
	display: block;
	color: #f2f2f2;
	text-shadow: 1px 0 0 #101011;
	padding: 0 10px;
	border-radius: 2px;
	box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
	background: linear-gradient(#434345,#2f3032);
}
.pagination a:hover {
	text-decoration: none;
	box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
	background: linear-gradient(#f48b03,#c87100);
}

这种方案的缺点就是我们需要指定宽度，当元素的宽度无法确定的时候，这种方案就无法达到自适应了。

2 inline-block实现水平居中

我们先看看display: inline-block是个啥？

MDN-display：该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）

这里的关键是将li的display设置为inline-block但是仅仅这样是无法达到居中的，还需要在父元素中设置text-align: center

.pagination {
	text-align: center;
}  
.pagination li {
	line-height: 25px;
	display: inline-block;
	margin: 0 5px;
}
.pagination a {
	display: block;
	color: #f2f2f2;
	text-shadow: 1px 0 0 #101011;
	padding: 0 10px;
	border-radius: 2px;
	box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
	background: linear-gradient(#434345,#2f3032);
}
.pagination a:hover {
	text-decoration: none;
	box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
	background: linear-gradient(#f48b03,#c87100);
}

这个方案看起来简单易懂，但是它会带来一个空白间距的问题需要兼容部分浏览器具体解决方案戳这里如何解决inline-block元素的空白间距。

3 flex布局实现水平居中

使用flex实现水平居中so easy！！！之前学习flex留下了点点笔记Flex布局基本概念

.pagination {
	display: flex;
	justify-content: center;
}  
.pagination li {
	line-height: 25px;
	float: left;
	list-style: none;
	margin: 0 5px;
}
.pagination a {
	display: block;
	color: #f2f2f2;
	text-shadow: 1px 0 0 #101011;
	padding: 0 10px;
	border-radius: 2px;
	box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
	background: linear-gradient(#434345,#2f3032);
}
.pagination a:hover {
	text-decoration: none;
	box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
	background: linear-gradient(#f48b03,#c87100);
}

使用flex的方案简单快捷，如今也不存在兼容性的问题当然如果使用上古浏览器还是有的。

垂直居中方案

行内元素

padding上下等距实现垂直居中

对于单行行内或者文本元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中：

.link {
	padding-top: 10px;
	padding-bottom: 10px;
}

flex布局实现垂直居中

通过功能强大的flex达到垂直居中的效果当然前提是父级元素是由确定高度的。

.flex-center-vertically { 
	display: flex; 
	justify-content: center; 
	flex-direction: column; 
	height: 400px; 
}

块级元素

position&margin实现垂直居中

在已知元素高度的情况下：通过定位和margin-top实现

.parent {
	background-color: #5f524f;
	height: 300px;
	margin: 20px;
	width: 300px;

	position: relative;
}
.child {
	background-color: red;
	
	position: absolute;
	top: 50%;
	height: 100px;
	margin-top: -50px;
}

transform实现垂直居中

未知元素高度的情况下，通过transform的translate属性将元素中心与父元素中心重合，达到垂直居中。

.parent {
	background-color: #5f524f;
	height: 300px;
	margin: 20px;
	width: 300px;

	position: relative;
}
.child {
	background-color: red;
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

flex布局实现垂直居中

使用flex布局实现垂直居中简单明了

.parent {
	background-color: #5f524f;
	height: 300px;
	margin: 20px;
	width: 300px;

	display: flex;
	justify-content: center;
	flex-direction: column;
}

水平且垂直居中

通过前面两节，我们已经知道如何达到水平和垂直居中了，那么水平切垂直居中也就没有那么困难了。我们发现主要场景就是已知宽度和高度的居中和未知宽高元素的居中，那我们就从这两个角度实现水平垂直居中。

已知元素宽高

已知我们居中的元素的宽高，我们只需要将父元素相对定位，子元素绝对定位通过负向的margin找到父元素的中心即可：

.parent {
	position: relative;
}
.child {
	background-color: red;
	
	position: absolute;
	width: 150px;
	height: 150px;
	padding: 10px;
	top: 50%;
	left: 50%;
	margin: -85px 0 0 -85px;
}

未知元素宽高

未知元素宽高的情况下，我们利用transform的translate属性将元素中心与父元素中心重合，达到水平垂直居中即可：

.parent {
	position: relative;
}
.child {
	background-color: red;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

flex水平垂直居中

最后当然是大杀器flex啦。使用flex实现水平垂直居中就so easy 了

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

小结

通过上面的实验下来，基本可以解决日常的一些居中的问题，可以发现通过flex布局实现居中是非常舒服的，再也不用为实现居中而烦恼啦～～～

参考文章：
六种实现元素水平居中
CSS居中完整指南

若文中有知识整理错误或遗漏的地方请务必指出，非常感谢。如果对你有一丢丢帮助或引起你的思考，可以点赞鼓励一下作者=^_^=

[ycrxun]

666

涨姿势了

[wolfdu]

@ycrxun 苍老师跟着你才涨姿势 (๑¯ิε ¯ิ๑)

[ycrxun]

@wolfdu 并不，我是水军