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

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

行内元素的水平居中设置

行内元素的水平居中有一个通用的方法：通过在其父元素中设置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;
}