前兩天給大家分享了使用定位讓盒子脫離文檔流,從而才能利用margin:auto使其居中扩然,
今天來總結(jié)一下其他的一些方法:
demo1:定位+偏移(讓box在Box內(nèi)部水平垂直居中)
.Box { position : relative ; }
.box { position : absolute ; top : 50% ; left : 50% ; transform : translateX( - 50% ) ; translateY( -50% ) ; }
demo2:巧用display
????.Box {????display: table-cell ; vertical-align: middle; text-align: center;}? ??????
????.box {display: inline-block}
demo3:彈性布局
.Box { display: flex; justify-content: center; align-items: center;}
個人也是比較喜歡利用這種方法觅闽;父盒子如上使用彈性布局后帝雇,內(nèi)部元素全都會垂直水平居中。