行内元素和块状元素的水平居中设置

我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别
三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。
在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？

行内元素的水平居中设置

行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：
我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素：

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div>
		<span>这是一个行内元素</span>
	</div>
</body>
</html>

父元素div的css样式当中，用text-align: center;对span元素进行“水平居中”设置。
为了突出显示父元素div和子元素span之间的位置关系，设置一下背景颜色：

div{
	width: 200px;
	height: 100px;
	background-color: yellow;
	text-align: center;
}
span{
	background-color: orange;
}

行内元素和块状元素的水平居中设置

块状元素的水平居中

块状元素又分为定宽块状元素 （width值固定）和不定宽块状元素（width的值不固定）。两种情况下有不同的设置水平居中方式：

定宽块状元素：
设置margin：0 auto，即设置一下上下margin值，然后把左右margin值设置为auto，让这个块状元素的左右margin值自动调整。

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div>
		<div id="son">这是一个定宽块状元素</div>
	</div>
</body>
</html>

div{
	width: 200px;
	height: 100px;
	background-color: yellow;
	text-align: center;
}
#son{
	margin: 0 auto;
	width: 160px;
	height: 30px;
	background-color: orange;
}

行内元素和块状元素的水平居中设置
注意：只有同时满足“定宽”和“块状元素”两个条件，才能使用“margin:0 auto”来设置水平居中！

不定宽块状元素

不定宽块状元素的水平居中设置有几种方法：

使用table标签：
table法当中，我们在html代码当中让块状元素div成为table->td里的内容，然后再设置table的margin为0 auto，对table进行水平居中设置。

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<table>
		<tr>
			<td>
				<div id="son">这是一个不定宽块状元素,table标签具有长度自适应性，因此可以看成一个定宽块状元素。然后再利用定宽块状元素的margin:0 auto方法实现水平居中</div>
			</td>
		</tr>
	</table>
</body>
</html>

table{
	border:1px solid red;
	margin: 0 auto;
}
#son{
	background-color: orange;
}

行内元素和块状元素的水平居中设置
2. 将该元素设置为行内元素，然后再用行内元素的水平居中方法（该元素display：inline；该元素的父元素text-align:center）:

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div>
		<div id="son">这是一个不定宽块状元素</div>
	</div>
</body>
</html>

div{
	width: 300px;
	height: 100px;
	background-color: blue;
	text-align: center;/*父元素设置text-align：center*/
}
#son{
	display: inline;/*子元素设置display:inline;*/
	height: 30px;
	background-color: orange;
}

行内元素和块状元素的水平居中设置
3. 设置该元素的父元素左浮动，并进行定位（float:left;position:relative;left:50%????，
该元素利用相对定位的方式，相对于其自身向左移动50%。
（position:relative; left:-50%）

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div id="father">
		<div id="son">这是一个不定宽块状元素,父元素和子元素的宽度都不确定，用float浮动，再用position定位。</div>
	</div>
</body>
</html>

#father{/*让父元素浮动起来，再定位到body的中线位置*/
	float: left;
	position: relative;
	left: 50%;
}
#son{/*相对于父元素定位，定位到向左偏移50%的位置*/
	position: relative;
	left: -50%;
	background-color: orange;
}

行内元素和块状元素的水平居中设置

4、将父元素设置为弹性盒（display:flex;）目标元素设置外边距自动（margin:auto）

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div id="father">
		<div id="son">这是一个不定宽块状元素,父元素设置为弹性盒来实现水平居中</div>
	</div>
</body>
</html>

#father{
	display: flex;
	background-color: yellow;
}
#son{
	margin: 10px auto;
	height: 50px;
	background-color: orange;
}

行内元素和块状元素的水平居中设置