css水平垂直居中问题
水平居中:
- 行内元素:text-align:center;
- 块级元素:magin:0 auto;
- 子元素设置:position:absolute; left:50%; transform:translateX(-50%);
- 父元素设置:display:flex; justify-content:center;
垂直居中:
- line-height:height;
- 子元素设置:position:absolute; top:50%; transform:translateY(-50%);
- 父元素设置:display:flex; align-items:center;
水平垂直居中:
- display:flex; justify-content:center; align-items:center;
- .parent{position:relative; } .children{position:absolute; width:200px; height:100px; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}
- .parent{position:relative;} .children{position:absolute; width:200px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%)}
- .parent{position:relative;} .children{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}