实现元素垂直居中
1 已知元素的高度
父元素 position:relative
子元素:
position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px;
2 不知道子元素的高度:
父元素 position:relative
子元素方法1:
position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
方法2:
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
方法3 使用flex:
父元素设置:
display: flex; align-items: center; justify-content: center;
方法4:利用vertical-align
父元素:text-align:center;
父元素::after{content:'';display:inline-block;height:100%;vertical-align:center;}
子元素:display:inline-block;vertical-align:center;