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水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • CSS居中完全指南——构建CSS居中决策树

    CSS居中完全指南——构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下...

  • CSS居中小结

    CSS居中总结 最近在学习CSS居中,居中里面又包含水平居中和垂直居中,分不太清内联元素(inline or in...

  • CSS垂直居中

    CSS垂直居中的方法总结: 1.利用padding垂直居中(line-height用于单行文本居中) **不需要设...

  • CSS居中的几种方式

    本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中。水平居中...

  • Css让div在屏幕上居中

    # 让div在屏幕上居中(水平居中+垂直居中)的方法总结 - html代码如下: - Css居中方法 (敲黑板)...

  • 前端秘籍,CSS垂直居中必学八式,一招一式尽显功力

    前言 设计网页的时候,除了CSS水平居中的需求外,还会经常遇到CSS垂直居中的需求,CSS垂直居中跟CSS水平居中...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • 垂直居中的方法

    行内元素居中 html css before元素居中 html css table-cell居中 css 垂直居中...

网友评论

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

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