CSS居中

最近一直在面试，所以最近打算写一些前端面试的总结和必考的知识点，方便他人娱乐自己。

NO1.各种居中布局

水平居中

1、text-align:center
父元素为块元素时子元素无论是块元素还是行元素都可以实现居中，当父元素为行元素时则失效，转换为inlin-block并设定宽度就可以了，低版本IE下貌似不好使。

<style type="text/css">
.con{text-align: center;}	
</style>

<div class="con">
	<span>文字居中</span>
</div>

2、 margin:0 auto;
元素必须为display：block，而且必须有宽度。

<style>
.con{width：100%}
.con span {margin:0 auto;display: block;width: 20%;border:1px solid red;}
</style>


<div class="con">
	<span>文字居中</span>
</div>

3、position:absolute;left:50%;margin-left:-width/2(已知宽度);

<style type="text/css">
.con div{position:absolute;left:50%;margin-left:-100px;width:200px;border:1px solid red;}
</style>

<div class="con">
	<div>居中元素</div>
</div>

4、相对浮动(宽度未知)

<style type="text/css">
.con{position: relative;float: left;left:50%;border:1px solid red;}
.con div{position: relative;float: left;right:50%;border:1px solid black;}
</style>

<div class="con">
	<div>居中元素</div>
</div>

5、display:flex;justify-content:center;(css3弹性盒模型)

<style type="text/css">
.con{display: flex;justify-content:center;}
</style>

<div class="con">
	<div>居中元素</div>
</div>

6、display:table;text-align:center;方法可以实现。

<style>
#box{width:100%;height:100px; display:table;text-align:center;border: 1px solid red}
#box span{width:100%;display:table-cell; vertical-align:middle;}
#inner{display:inline-block;width:200px; border:1px solid #000;}
</style>

<div id="box"> 
     <span><div id="inner">11111111111111111111</div> </span>
</div>

垂直居中

1、position:absolute;top:50%;margin-top:-height/2;(已知高度)

<style type="text/css">
.con div{position: absolute;top:50%;height:100px;margin-top:-50px;}
</style>

<div class="con">
	<div>居中元素</div>
</div>

2、display:flex;items-align:center;父容器必须有高度(IE10以上支持，Safari支持－webkit-前缀的)

<style type="text/css">
.con {display: flex;
	 display:-webkit-flex;
     -webkit-align-items: center;
     height: 400px;
}
</style>
<div class="con">
	<p>居中元素</p>
</div>

3、display:table-cell;vertical-align:middle;

<style>
#box{width:100%;height:100px; display:table;text-align:center;border: 1px solid red}
#box span{width:100%;display:table-cell; vertical-align:middle;}
#inner{display:inline-block;width:200px; border:1px solid #000;}
</style>

<div id="box"> 
     <span><div id="inner">11111111111111111111</div> </span>
</div>

4、单行内容居中line-height;

<style type="text/css">
.con {height: 40px;line-height: 40px;border: 1px solid red}
</style>

<div class="con">
	元素居中
</div>