博主今晚实在是无聊,正好公司这边做前端事情比较少。。
今天就来大概讲一下css水平垂直居中吧,估计好多人都特别懊恼,网上的资料都不是很全,所以我就来送一波福利啦~
-
flex
弹性布局flex相信大家都不陌生吧? 那么,通过下面几行,就可以实现水平垂直居中啦display:flex;
justify-content:center;
align-item:center;注意:这个是在父元素上设置
我们需要知道的是align-item是垂直方向上的居中哦 -
transform
transform是css3的新属性,大家有空一定要多去了解哦
话不多说,送上代码~position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);注意:这个是在子元素上设置
好啦,这两个应该是最简洁的方式了,当然肯定还有很多其它的方法