css使用水平居中和垂直居中

一.水平居中

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

 

.parent{text-align: center;}
.child{display: inline-block;}

2.使用width和margin實現

.child{width:200px;margin:0 auto;

 

 

3.使用display和margin實現

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

 

4.使用絕對定位實現

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

5.使用flex

.parent{display: flex;}
.child{margin: 0 auto;}

 

 

二 垂直居中

http://caibaojian.com/img-vertical-middle.html