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%);}

注意：translate是值的百分比是相对于自己的宽高，而margin-top的百分比是相对于父元素的

 

3：利用flex实现

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

作者： GD_SeHun 
链接：http://www.imooc.com/article/2235
来源：慕课网