CSS - 实现垂直居中的几种方式
1. 元素为未知宽高的元素
flex
http://www.ruanyifeng.com/blo...
display: flex; justify-content:center; align-items:Center;
translate
position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center;
flex和margin:auto
.box{ display: flex; text-align: center; } .box span{margin: auto;}
2. 元素为为定宽定高(自身包含尺寸的元素)的元素
绝对定位和负边距
position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px;
绝对定位和0
原理:当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性,具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样
width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
参考:
https://www.cnblogs.com/hutuz...
https://www.zhangxinxu.com/wo...
相关推荐
sdbxpjzq 2020-05-04
wcssdu 2020-01-11
玫瑰小妖 2019-12-31
drdrsky 2020-06-16
PioneerFan 2020-06-10
冰蝶 2020-06-05
heavenautumn 2020-05-11
guojiadonglian 2020-04-24
lcyangcss 2020-04-21
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
冰蝶 2020-01-10
dazhifu 2019-12-31
行吟阁 2019-12-08
zengni 2019-11-13