css實現div不定寬高垂直水平居中解決方案

　　　　在項目中咱們常常能遇見然圖片垂直水平居中，不定寬高的div垂直水平居中，等等~~

　　　　如今我將介紹我所知道的幾種用css來解決的幾種方案。

1.父元素text-align:center;display:table-cell;vertical-align:middle;子元素display:inline-block;

　　

.parent{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.child{
	display: inline-block;
}

　　這個方案兼容性比較友好，完美利用了表格單元格的特性。

　　

2.父元素position:relative;子元素position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

1 .parent{
2     position: relative;
3 }
4 .child{
5     position: absolute;
6     left: 50%;
7     top: 50%;
8     transform: translate(-50%,-50%);
9 }

這種方案有個兼容性問題，就是transform這個屬性。不過基本也沒多大問題。這種方案主要利用 了transform這個屬性translate基於自身偏移。

 

3.父元素display:flex;justify-content:center;align-items:center;

1 .parent{
2     display: flex;
3     justify-content: center;
4     align-items: center;
5 }

這種方案主要利用了flex的特性，flex佈局只兼容IE10+。我的以爲flex佈局是將來的方向。想了解flex佈局狠狠地戳這裏

 

我的推薦第一種方案，兼容性友好雖然麻煩點。

最後附上網易學友提供的方便記住的思惟導圖