css水平垂直居中

r囧r小猫 2023-06-10 10:29 191阅读 0赞

css水平垂直居中方法总结，简单明了

水平居中

  • 对于行内元素(inline)：text-align: center;
  • 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto
  • 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

垂直居中

对于行内元素(inline)

  • 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等
  • 多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

1316387-20180424184156398-2137763282.png

更多专业前端知识，请上 【猿2048】www.mk2048.com

发表评论

表情：
评论列表 （有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS水平垂直居中

            在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 517 阅读