CSS布局-垂直居中

nqkk58

水平居中比较简单，针对行内元素，对其父元素配置text-align:center；针对块级元素，对其自己应用margin:auto。

而垂直居中相对则比较麻烦，能够有三种处理方法

绝对定位居中

绝对定位居中需求元素拥有固定的宽度和高度，并且倘若元素超过了视口，超过视口的部分会被裁剪掉！

export default() => { return ( <div className={"container"}> <div className={"component"}> Hello Friends! <br/> 伴侣们,你们好呀! </div> </div> ) }; .container { position: relative; width : 100%; height : 100vh; } .component { position : absolute; top : 50%; left : 50%; transform: translate(-50%, -50%); }

视口移位居中

仅适用于视口居中！

export default() => { return ( <div className={"container"}> <div className={"component"}> Hello Friends! <br/> 伴侣们,你们好呀! </div> </div> ) }; .component { text-align: center; margin : 50vh auto 0; transform : translateY(-50%); }

Flexbox居中

借助flexbox和margin:auto，不仅能够在水平方向上居中，还能够在垂直方向上居中

export default() => { return ( <div className={"container"}> <div className={"component"}> Hello Friends! <br/> 伴侣们,你们好呀! </div> </div> ) }; .container { display: flex; } .component { margin: 100px auto; }

借助flexbox的align-items和justify-content

export default() => { return ( <div className={"container"}> Hello Friends! <br/> 伴侣们,你们好呀! </div> ) }; .container { display: flex; justify-content: center; align-items : center; }

akbchina.cn

“沙发”（SF，第一个回帖的人）‌

4zhvml8

谢谢、感谢、感恩、辛苦了、有你真好等。

4zhvml8

“NB”（牛×的缩写，表示叹为观止）‌

b1gc8v

认真阅读了楼主的帖子，非常有益。