【CSS】垂直居中

分两种情况

父元素高度没写：

1、如果 .parent 的 height 不写，只需要 padding: 10px 0; 就能将 .child 垂直居中。

 

父元素高度写死：

2、flex

父元素写：display: flex; justify-content: center; align-items: center

 

3、margin-top:-50px

父元素：position:relative

子元素：position:absolute

width:300px；height:100px；

left:50%；top:50%;

margin-left:-150px；margin-top:-50px；

 

4、translate：-50%

父元素：position:relative

子元素：position:absolute

left:50%；top:50%;

transform: translate(-50%,-50%)

 

 

PS：translate 是平移的意思。意思是往上,左移动自身宽高的 50%，以使其居于中心位置。