css 水平垂直居中方法

时间:2020-12-26 19:33:44

博主今晚实在是无聊,正好公司这边做前端事情比较少。。
今天就来大概讲一下css水平垂直居中吧,估计好多人都特别懊恼,网上的资料都不是很全,所以我就来送一波福利啦~

  1. flex
    弹性布局flex相信大家都不陌生吧? 那么,通过下面几行,就可以实现水平垂直居中啦

    display:flex;
    justify-content:center;
    align-item:center;

    注意:这个是在父元素上设置
    我们需要知道的是align-item是垂直方向上的居中哦

  2. transform
    transform是css3的新属性,大家有空一定要多去了解哦
    话不多说,送上代码~

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    注意:这个是在子元素上设置

好啦,这两个应该是最简洁的方式了,当然肯定还有很多其它的方法