css幾種垂直居中方法和原理淺析，我相信你必定會用到的

我相信前端童鞋在平常的佈局中必定遇到過各類各樣的佈局情形，而各類居中的方法必定不佔少數。這裏我給你們分享幾種居中的方式，而且簡單的解析一下他們的原理。

絕對定位居中

簡易代碼以下：

<style type="text/css" media="screen">
       .box{
			background:#ccc;
			height:100px;
			width:200px;
			margin: auto;
            position: absolute;
            top: 0; 
			left: 0; 
			bottom: 0; 
			right: 0;
		}	    
    </style>

<div class="box">
</div>

解析：這個主要是用position: absolute;來實現垂直居中.

• 咱們都知道margin：auto;是能夠實現水平居中的。

• 那當咱們添加絕對定位的時候，box這個div就會脫離文檔流，變成塊狀元素（你可能會問box原本就是塊狀元素的div啊，是的，可是若是這裏是span固然包含全部內斂元素都會變成塊狀元素。能夠看下簡友的《說說行內元素與塊級元素以及之間的轉換？》）。

能夠明顯的看出box脫離了本來的正常文檔流，body高度爲0。

• 再次添加 top: 0; left: 0; bottom: 0; right: 0; ** ps：這裏去除了box的寬度限定 **

瀏覽器會爲box元素包裹一層新的盒子，所以這個元素會填滿它相對父元素的內部空間，這個相對父元素能夠是body標籤，或者是一個非靜態（默認）定位的容器。 給元素設置了寬高之後，瀏覽器會阻止元素填滿全部的空間，根據margin: auto; 的要求，從新計算，幷包裹一層新的盒子。既然塊元素是絕對定位的，又脫離了普通文檔流，所以瀏覽器在包裹盒子以前會給margin-top和margin-bottom設置一個相等的值。 因而就產生了絕對居中的效果。 那若是想要在父容器裏面垂直居中呢。只須要給父容器添加position: relative;或者position: fixed;都是能夠的。

.part{
	width:400px;
	height:400px;
	background:red;
	position:relative;
}
.box1{
	background:#ccc;
	height:100px;
	width:200px;
	margin: auto;
    position: absolute;
    top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}
<div class="part">
	<div class="box1">	
	</div>
</div>

絕對居中的好處：

• 佈局塊能夠自由調節大小
• 無需額外的dom節點
• 自適應佈局，可使用百分比和最大最小高寬等樣式
• 居中時不考慮元素的padding值（也不須要使用box-sizing樣式）
• img的圖像也可使用
• 跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10） ** 同時注意：** ** 必須聲明元素高度 ** **  推薦設置overflow:auto;樣式避免元素溢出，顯示不正常的問題 ** **  這種方法在Windows Phone上不起做用 **

今天這篇居中文章就寫到這了，以後還會介紹其餘幾種居中方法，請繼續關注哦！