HTML+CSS：分场景实现网页内容水平居中的代码小结

关于实现网页中各种内容居中的问题（包括本文讲到的水平居中，与下一篇文章将会探讨的垂直居中），常常使得前端新人困扰不已，明明刚刚在 A 处用了该方法使内容成功居中了，为什么到了 B 处就没用了呢？就连一些老手也只是习惯性使用，并没做过分析，在遇到复杂情况时也极容易蒙圈。

网上关于居中问题大多是根据实现的方法一个一个进行总结的，酷睿觉得分使用场景进行总结可能会更清晰一些。当然，本文总结的方法不一定全面，后续有发现更好的方法会再进行补充，也欢迎大家在评论区留言分享，一起交流。

一、内联元素（含文本）实现水平居中

方法1：使用 text-align 。

1. text-align 对块元素中的内联元素（含文本）生效。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		text-align:center;
	}
</style>

<div class="father">
	<a href="#">这是一个块元素中的内联元素</a>
</div>

<br/>

<div class="father">
	这是一个块元素中的文本
</div>

效果图：

2. text-align 对块元素中的子块元素无效，但是子块元素会继承父块元素的 text-align 属性。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		text-align:center;
	}
	.child{
		border:1px dashed blue;
		width:400px;
	}
</style>

<div class="father">
	<div class="child">
		<a href="#">这是一个子块元素中的内联元素</a>
	</div>
</div>

效果图：

3. text-align 直接用在内联元素无效。

<style type="text/css">
	.inline{
		border:1px solid red;
		text-align:center;	
	}
</style>

<a href="#" class="inline">这是一个内联元素</a>

效果图：

方法2：使用 position 进行绝对定位，再使用 transform 进行偏移。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		position:relative;
	}
	.child{
		position:absolute;
		left:50%;
		transform:translate(-50%);
	}
</style>

<div class="father">
	<a href="#" class="child">这是一个块元素中的内联元素</a>
</div>

效果图：

二、单个块元素实现水平居中

A. 固定宽度块元素

方法1：直接使用 margin:0 auto 。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
	}
	.child{
		border:1px dashed blue;
		width:400px;
		margin:0 auto;
	}
</style>

<div class="father">
	<div class="child">
		这是一个固定宽度的子块元素
	</div>
</div>

效果图：

方法2：使用 position 进行绝对定位，再使用 transform 进行偏移。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		position:relative;
	}
	.child{
		border:1px dashed blue;
		width:400px;
		position:absolute;
		left:50%;
		transform:translate(-50%);
	}
</style>

<div class="father">
	<div class="child">
		这是一个固定宽度的子块元素
	</div>
</div>

效果图：

B. 非固定宽度块元素

方法1：使用 flex 弹性布局。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		display:flex;
		justify-content:center;
	}
	.child{
		border:1px dashed blue;
	}
</style>

<div class="father">
	<div class="child">
		这是一个非固定宽度的子块元素
	</div>
</div>

效果图：

方法2：使用 position 进行绝对定位，再使用 transform 进行偏移。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		position:relative;
	}
	.child{
		border:1px dashed blue;
		position:absolute;
		left:50%;
		transform:translate(-50%);
	}
</style>

<div class="father">
	<div class="child">
		这是一个非固定宽度的子块元素
	</div>
</div>

效果图：

其它：通过在非固定宽度的子块元素上添加 width:fit-content 配合 margin:0 auto 也能在部分浏览器上实现水平居中，但由于兼容性不佳，如 IE 就不支持，故不推荐使用！

三、多个块元素实现水平居中

方法1：使用 inline-block + text-align 。由于子块元素会继承父块元素的 text-align 属性，所以子块元素里的内联元素（含文本）也水平居中了。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		text-align:center;
	}
	.child{
		border:1px dashed blue;
		width:200px;
		display:inline-block;
	}
</style>

<div class="father">
	<div class="child">这是子块元素1</div>
	<div class="child">这是子块元素2</div>
</div>

效果图：

方法2：使用 flex 弹性布局。子块元素中的内容不会居中。

<style type="text/css">
	.father{
		border:1px solid red;
		width:800px;
		height:50px;
		display:flex;
		justify-content:center;
	}
	.child{
		border:1px dashed blue;
		width:200px;
	}
</style>

<div class="father">
	<div class="child">这是子块元素1</div>
	<div class="child">这是子块元素2</div>
</div>

效果图：

其它：使用万能的 position 绝对定位+ transform 偏移 也能实现多个块元素的水平居中。但由于在此场景下使用时需要分别计算各子块的偏移量，故不推荐。

最后，对于更为复杂的使用场景，无非是对以上三种场景的组合，大家掌握以上方法之后，灵活使用即可。