美文网首页
css元素居中

css元素居中

作者: huangman | 来源:发表于2018-03-12 17:17 被阅读11次

    水平居中

    • 这里讨论的水平居中,是针对处于文档流中的元素。绝对定位(absolute),固定定位(fixed),浮动(float)这三种定位的元素由于脱离了文档流,如果要水平居中只能通过设置top/right/bottom/left位置达到。这里讨论的水平居中是针对还处于文档流中的元素,也就是无定位(static)和相对定位(relative)元素。文档流中的元素分为block,inline-block,inline三种显示模式,所以水平居中也分为三种方式:
    1. 对于block元素,水平居中通过设置margin: 0 auto来实现。
    2. 对于inline-block元素,需要通过设置父元素的text-align:center来实现。
    3. 对于inline元素同inline-block元素。

    垂直居中

    • 文字垂直居中可以用line-height等于容器高度来实现。
    • 如果是图片,可以使用padding:xxpx 0来实现。

    相关文章

      网友评论

          本文标题:css元素居中

          本文链接:https://www.haomeiwen.com/subject/upbnfftx.html