我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别
三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。
在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？
行内元素的水平居中设置
行内元素的水平居中有一个通用的方法：通过在其父元素中设置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;}
