• 技术文章 >web前端 >css教程

    css中怎么将div设置为居中

    VV2021-06-07 17:43:57原创251

    css中将div设置为居中的方法是设置定位,例如【position:absolute;】或【margin:auto;】。当我们需要充分考虑浏览器的兼容性时,可以使用Flex布局方法。

    本文操作环境:windows10系统、css 3、thinkpad t480电脑。

    在css中设置div居中显示,我们可以通过如下几种方法来实现。

    定位法:position:absolute

    如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。大家可以去尝试下看看效果。

    ad2eaceecd0be5c9acd32008ccf6989.png

    margin:auto法

    这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto

    42d4f45c1d344b2c11f4c5137c0bee3.png

    display:table-cell法

    这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。

    f6a308b63ac31bfb3a8fb4834271740.png

    transform:translate(x,y)法

    这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

    eb26bd7e0e142c7d9ccd2e7c17b16e3.png

    before,after伪元素法

    这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现,比如给子级元素设置:margin:0 auto;这样就水平和垂直都居中了。

    f76760a6313623116ec404d6ae6fcf2.png

    Flex布局法

    这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值,可以用在自适应页面中来实现水平垂直居中。

    b6daed5417f23808d371f56830573a8.png

    相关视频推荐:css视频教程

    以上就是css中怎么将div设置为居中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css div
    上一篇:css中如何清除float 下一篇:css实现三角的原理
    第16期线上培训班

    相关文章推荐

    • css怎么把div设置成圆角• css如何设置div的宽度• css怎么去掉div边框• css中文字超出div怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网