「面试」-CSS水平垂直居中

86 阅读1分钟

定位三大方法

left、right、top、bottom为0

父级盒子「position:relative」,子盒子「position:absolute」。

参考codepen

margin-left和margin-top为负子盒子宽一半

因为left、top50%,是子盒子左上角针对position为relative的父盒子来说的居中,所以需要margin-left、margin-top子盒子宽度的一半。但是这样的话就必须要知道子盒子的宽度哦~

参考codepen

CSS3的transform

类似于第二种定位实现的方式,但是不需要知道子盒子宽度~

参考codepen

flex弹性伸缩

CSS3提供的这种flex非常方便,现在也是非常常用的一种。

参考codepen

grid

参考codepen