css 水平垂直居中拾遺

在實際開發中，居中的狀況很是常見，幾乎存在於天天的開發中，因此藉助這篇文章來總結一下水平垂直的方法，但願對你們有所幫助。

首先約定一下DOM結構：

<div class="parent-dom">
	<span class="child-dom">e1e211</span>
</div>	
複製代碼

假定父級的CSS以下：

.parent-dom{
	position: absolute;
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	z-index: 999;
}

複製代碼

說明：

默認父級相對body絕對定位，而且寬高爲屏幕的寬高，這樣作的目的：一、讓父級元素有寬高，不然無高度沒法看出寬高居中效果；二、可是父級寬高未知，畢竟開發中不都是定寬定高的；

好了，預備工做作完了，開始吧

一、使用絕對定位方式

css代碼

.child-dom{
    position: absolute;
    width: 50%;
    height: 50%;
    background: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

說明：

首先讓其相對其父級絕對定位，假定寬爲50%，高爲50%；這樣寬高也是未知，符合咱們前面的初衷，寬高未知的狀況下去設定水平垂直居中；

而後結合：left、right、top、bottom都設定爲0，margin設爲auto；這樣便達到了水平垂直居中

---

二、利用transform

.child-dom{
    position: relative;
    width: 50%;
    height: 50%;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
複製代碼

說明： 首先這裏必定要給定一個position值，最好爲relative或者absolute,不然瀏覽器沒法計算left,top值；

而後left,top值都設定爲50%，偏移量translate的X軸和Y軸都設爲-50%，一樣能夠水平垂直居中

---

三、flex佈局

.parent-dom{
	position: absolute;
	display: flex; /*固定值*/ 
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	align-items: center; /*固定值*/ 
	justify-content: center; /*固定值*/ 
	z-index: 999;
}
.child-dom{
    position: relative;
    width: 50%;
    height: 50%;
    background: #fff;
}
複製代碼

說明：

首先這裏主要是靠父級元素來控制，設定父級元素display爲flex；algin-items設爲center(垂直居中);justify-content設爲center(水平居中)

其次子元素，可設flex值或者不設置均可以， 水平垂直居中目的完成

---

四、利用inline-block方式

.parent-dom{
	position: absolute;
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	font-size: 0; /*建議設爲0*/
	z-index: 999;
}
.parent-dom:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
.child-dom{
    position: relative;
    background: #fff;
    width: 50%;
    height: 50%;
    display: inline-block;
    vertical-align: middle;
}
複製代碼

說明：

首先設定父級元素text-algin爲center(水平居中)；建議這裏font-size爲0；

而後給父級元素一個僞類after；設定display爲inline-block;height爲100%；width爲0；居中元素display設爲inline-block;而後僞類和居中元素vertical-algin都設爲middle，便可達到垂直居中的目的，而後這裏font-size從新設置一下

---

五、利用table-cell

.parent-dom{
    display: table-cell;
	width: 100vW;
	height: 100vH;
	background: rgb(239, 52, 115);
	text-align: center; 
	vertical-align: middle;
}
.child-dom{
    background: #fff;
	width: 50%;
	height: 25%;
	display: block;
	margin: 0 auto;
}
複製代碼

說明：

首先父級display設爲table-cell;text-algin爲center(若是子元素display爲block能夠不設置此值)；vertical-align設爲middle;達到垂直上居中

其次子元素，建議設置一個display，若是爲block，則要加上margin: 0 auto;達到水平上居中

---

總結

第二種方法和第三種方法適合作移動端開發或者兼容性要求不高的開發中，固然，方法確定還有不少，一搜各式各樣的居中法，什麼6種終極居中法，7種最適合你的居中法，8種絕世居中法，畢竟這是一盤炒剩的菜，你們都有不一樣的看法，若是你們都不發表意見去總結，那前端還有什麼活力？因此，前端的活力仍是存在的，知識就是這樣，你們一塊兒參與，纔會發展的更好，這門技術纔能有活下去的潛力；

---

想要了解更多的前端方面相關的知識， 請搜索關注微信公衆號【大前端js】，瞭解更多前端的硬技術

好了，感謝你們的閱讀，同時這篇文章起到拋磚引玉的做用，你們一塊兒來討論本身的水平居中方法，固然，前提是寬高未知哦，再一次感謝你們

原創不易，轉載請註明出處，銘感五內