css盒子垂直居中的5种方式
第一种,常用于垂直居中盒子的文字,需要知道盒子高度,行高不能设置百分比
text-align:center; line-height:盒子本身高度
第二种,使用display:table和display:table-cell配合,两个必须分别作用于父盒子和子盒子
display:table-cell; vertical-align:middle;
第三种,使用flex布局,不需要知道宽高,写在父盒子
display:flex; justify-content:center; align-item:center;
第四种,使用position定位
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
第五种,也是使用position定位
position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
相关推荐
drdrsky 2020-06-16
PioneerFan 2020-06-10
冰蝶 2020-06-05
heavenautumn 2020-05-11
sdbxpjzq 2020-05-04
guojiadonglian 2020-04-24
lcyangcss 2020-04-21
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
wcssdu 2020-01-11
冰蝶 2020-01-10
玫瑰小妖 2019-12-31
dazhifu 2019-12-31
行吟阁 2019-12-08
zengni 2019-11-13
编程手札 2014-05-27