在页面布局中，居中在各种各样的场景中广泛被用到，也经常被新人提及。以前做过一些自己探索居中问题的demo，今天翻出来了，正好做一下笔记，记录一下。以后遇到问题也能快速方便快速找到。
居中包括水平居中和垂直居中两种，其中水平居中相对来说容易解决，但是垂直居中有时就令人头疼了，其实也不是很难。各自都有很多方式来实现，本文主要是总结一下自己以前的demo，并不代表主流方式。另外先打个预防针，下面的例子很丑，以前做的，勿喷。
水平居中
说到水平居中，你可能立马想到的是text-align:center;或者margin:0 auto;这是最简单的水平居中方式，也是使用很广泛的水平居中方法。我们来探索一下，他俩居中能力到底有多强？
text-align:center水平居中
对直接文本子元素进行居中
<div style="width:200px;height:100px;background:#555;text-align:center"> 利用text-align对本元素文字水平对齐</div>
利用text-align对本元素文字水平对齐
对子div元素水平对齐
<div style="width:300px;height:300px;background:#555;text-align:center"> <div style="width:200px;height:100px;border:1px dotted blue;background:#f00;"> 利用text-align对子div元素水平对齐 </div></div>
利用text-align对子div元素水平对齐
对子span元素水平对齐
<div style="width:300px;height:300px;background:#555;text-align:center"> <span style="background:#f00;"> 利用text-align对子span元素水平对齐 </span></div>
利用text-align对子span元素水平对齐
对设置了inline的div元素水平对齐
<div style="width:300px;height:300px;background:#555;text-align:center"> <div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;"> 设置了inline的div元素水平对齐 </div></div>
设置了inline的div元素水平对齐
对设置了inline-block的div元素水平对齐
<div style="width:300px;height:300px;background:#555;text-align:center"> <div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;"> 设置了inline-block的div元素水平对齐 </div></div>
设置了inline-block的div元素水平对齐
小结
text-align:center具有继承性，可以使文本元素以及子元素的文本水平居中，也可以使行内元素（或者设置了display:inline/inline-block属性的块状元素）水平居中，但不能使块状元素居中。
margin:0 auto水平居中
对直接子元素进行水平居中
<div style="width:200px;height:100px;background:#555;margin: 0 auto;"> 利用margin:0 auto对文字水平对齐</div>```  2. 对自身div元素水平对齐 ````js<div style="width:300px;height:300px;background:#555;"> <div style="width:200px;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;"> 利用margin:0 auto对自身div元素水平对齐 </div></div>```  3. 对自身div元素水平对齐,自身元素文本宽度未知 ````js<div style="width:300px;height:300px;background:#555;"> <div style="height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;"> 利用margin:0 auto对自身div元素水平对齐,自身元素文本宽度未知 </div></div>```  4. 对自身span元素水平对齐 ````js<div style="width:300px;height:300px;background:#555;"> <span style="background:#f00;margin: 0 auto;"> 对自身span元素水平对齐 </span></div>```  5. 对设置了block的span元素水平对齐 ````js<div style="width:300px;height:300px;background:#555;"> <span style="width:200px;height:100px;display:block;background:#f00;margin: 0 auto;"> 设置了block的span元素水平对齐 </span></div>```  6. 对设置inline的div元素水平对齐 ````js<div style="width:300px;height:300px;background:#555;"> <div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;"> 设置inline的div元素水平对齐 </div></div>```  7. 对设置inline-block的div元素水平对齐 ````js<div style="width:500px;height:300px;background:#555;"> <div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;"> 设置inline-block的div元素水平对齐 </div></div>```  **小结** **margin:0 auto;**没有继承性，只能使已知宽度的块状元素水平居中，且该块状元素为其本身。 除了以上``margin:0 auto;``水平居中方式之外还有可以使用postion配合margin或者transform来实现块状盒子水平居中的目的。 ## position配合margin或者transform水平居中 1. 对已知宽度的div元素盒子水平对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="width:100px;height:100px;background:#f00;position:absolute;left:300px;margin-left:-50px"> 对已知宽度的div元素盒子水平对齐 </div></div>```  2. 对未知宽度的div元素盒子水平对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="background:#f00;position:absolute;left:300px;transform: translate(-50%,0);"> 对未知宽度的div元素盒子水平对齐 </div></div>```  **小节** 这种方式的水平居中，既可以是父元素**已知宽度**，也可以是父元素**未知宽度**，分别对应margin和transform。 # 垂直居中 ## line-height 垂直居中 垂直居中时间很麻烦的事情，我们知道可以使用``line-height=height``可以使单行文本在父元素内垂直居中，这个很容易实现。 ```js<div style="width:500px;height:100px;background:#555;line-height:100px"> 利用line-height=height对单行文本在父元素内垂直居中</div>```  那么``line-height=height;``能不能使其他元素水平居中呢？我们来试一试： 1. 对子div元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;line-height:300px"> <div style="width:500px;height:100px;background:#f00;"> 利用line-height=height对div元素盒子垂直对齐 </div></div>```  2. 对子span元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;line-height:300px"> <span style="background:#f00;"> 利用line-height=height对子span元素盒子垂直对齐 </span></div>```  3. 设置了inline的div元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;line-height:300px"> <div style="background:#f00;display:inline"> 设置了inline的div元素盒子垂直对齐 </div></div>```  4. 设置了inline-block的div元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;line-height:300px"> <div style="background:#f00;display:inline-block"> 设置了inline-block的div元素盒子垂直对齐 </div></div>```  **小结** **line-weight:height**具有继承性，可以使文本元素以及子元素的文本垂直居中，也可以使行内元素（或者设置了display:inline属性的块状元素）垂直居中，但不能使块状元素（或设置了display：inline-block属性的块状元素）居中。 ## position配合margin或者transform 1. 对已知高度div元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="width:100px;height:100px;background:#f00;position:absolute;top:50%;margin-top:-50px"> 利用position对已知高度div元素盒子垂直对齐 </div></div>```  2. 对未知高度span元素盒子垂直对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <span style="background:#f00;position:absolute;top:50%;transform: translate(0,-50%);"> 利用position对未知高度span元素盒子垂直对齐 </span></div>```  **小结** 同样，利用很牛X的position配合margin或者transform来使已知高度或者未知高度的元素进行垂直居中。 # 垂直水平居中 垂直水平居中就是对上面两种居中方式的综合利用，不在解释，直接上例子： 1. 对已知宽高的div元素盒子垂直水平对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="width:100px;height:100px;background:#f00;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px"> 利用position和margin对已知宽高的div元素盒子垂直水平对齐 </div></div>```  2. 对未知宽高div元素盒子垂直水平对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="background:#f00;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);"> 利用position和margin对未知宽高div元素盒子垂直水平对齐 </div></div>```  3. 利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐 ````js<div style="width:600px;height:300px;background:#555;position:relative"> <div style="width: 200px;height:100px;background:#f00;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto"> 利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐 </div></div>```  4. 利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐 ````js<div style="width:600px;height:300px;background:#555;display:table-cell;vertical-align:middle;text-align:center"> <div style="width: 200px;height:100px;background:#f00;vertical-align:middle;display:inline-block"> 利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐 </div></div>``` 
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦