html+css常見的水平置中和垂直置中

標籤：

 

child代表子項目，parent代表父元素

1:使用text-align和inline-block實現

.parent{text-align:center;}

.child{display:inline-block;}

2:使用左右自動

.child{width:200px;margin:0 auto;}(需要設定指定的寬度才有效)

3：table進行實現

.child{display:table;margin: 0 auto;}

4:使用flex布局來實現

.parent{display:flex;justify-content:center;}或者

.parent{display:flex;}

.child{margin: 0 auto;}

5:使用絕對位置來實現

.parent{position:relative;}

.child{position:absolute;left: 50%;transform:translate(-50%);}

垂直分布

1:使用vertical-align

vertical-align又稱之為“inline-block依賴型元素”，也就是說,只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。
/*第一種方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;}

/*第二種方法*/ .parent{display:inline-block;vertical-align:middle;line-height:20px;}
2：使用絕對位置

.parent{position: relative;}

.child{position:absolute;top:50%;transition:translate(0,-50%);}

3:使用flex布局

.parent{display:flex;align-items:center;}

水平垂直全部置中

1：利用vertical-align,text-align,inline-block實現

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

.child{display:inline-block;}

2：利用絕對位置實現

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3：利用flex實現

.parent{display:flex;justify-content:center;align-items:center;}

GD_SeHun 
連結：http://www.imooc.com/article/2235
來源：慕課網

html+css常見的水平置中和垂直置中