CSS垂直居中总结

作者: 饥人谷_Jack | 来源:发表于2017-09-23 23:52 被阅读0次
    • 使块级元素里面的文本水平居中,在此块级元素添加text-align: center;即可实现。


      image.png
    • 使块级元素里面的内联元素水平居中,在此块级元素上添加text-align: center;即可实现。


      image.png
    • 使块级元素里面的块级元素水平居中,在子元素上添加margin: 0 auto;即可实现。(此种情况,子元素的块级元素必须设置固定的宽度,如果没有固定宽度,块级元素占据正行宽度,就没有水平居中这个说法了)


      image.png
    • 使块级元素里面的多行块级元素文本垂直居中,在父元素上添加padding即可实现。


      image.png
    • 使块级元素里面的单行文本垂直居中,在此块级元素添加line-height的高度等于此块级元素的高度即可即可实现。

    image.png
    • 使一个弹窗垂直水平居中,可以使用该绝对定位实现。
    image.png
    • 使一个块级元素内的一个行内元素垂直居中,可以使用vertical-align实现。
    image.png
    • 使一个块级元素内的一个行内元素垂直居中,可以使用table-cell实现垂直居中。
    image.png

    相关文章

      网友评论

        本文标题:CSS垂直居中总结

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