CSS居中实现【二】

对于普通块级元素,margin-auto只能实现水平居中,为何不能在垂直方向居中呢???在这里插入图片描述

很奇怪

查了一下, 对于普通块级元素,margin设为auto,意味着margin-top、margin-bottom的值都会被设为0,只能实现左右居中

对于定位了的块级元素,margin:auto可以实现什么呢?在这里插入图片描述

顶到左上角

再看一下设置 lbtr四个属性会怎么样

先给top0 bottom0

标题

垂直居中

还是水平居中

加上left0 right0

在这里插入图片描述

水平垂直居中

可以认为margin:auto是absolute的翅膀,当absolute带有lbtr四个属性,就全部撑开,水平垂直居中

如果lbtr 四个属性成对打开

left0 right0 水平居中

top0 bottom0 垂直居中

就不贴图了

开三个属性会怎么样?

三个属性正常开启,正常作用

四个全开是水平垂直居中

猜你喜欢

转载自blog.csdn.net/qq_26239917/article/details/88390885