浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)

浅谈居中问题

    • 概述
    • 行内元素居中
      • 水平居中
        • 方法一:父元素设置text-align: center;即可
      • 垂直居中
        • 方法一:父元素设置line-height即可
        • 方法二:父元素设置padding-top、padding-bottom
      • 水平垂直居中
        • 方法:设置text-align:center; line-height即可
    • 块元素居中
      • 水平居中
        • 方法一:margin: 0 auto;
        • 方法二:改变块元素为行内块元素 display: inline-block;
        • 方法三:定位 position
        • 方法四:flex布局
        • 方法五:box布局
      • 垂直居中
      • 水平垂直居中

概述

谈到居中,想必在工作中经常碰到该问题。水平居中,垂直居中,已知元素宽高,未知元素宽高等情况。

居中元素主要有以下两种
1. 行内元素居中
2. 块元素居中

居中情况主要有以下两种
1. 已知元素宽高居中
2. 未知元素宽高居中

行内元素居中

水平居中

方法一:父元素设置text-align: center;即可

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第1张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第2张图片

垂直居中

方法一:父元素设置line-height即可

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第3张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第4张图片

方法二:父元素设置padding-top、padding-bottom

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第5张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第6张图片

水平垂直居中

方法:设置text-align:center; line-height即可

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第7张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第8张图片

块元素居中

水平居中

方法一:margin: 0 auto;

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第9张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第10张图片

方法二:改变块元素为行内块元素 display: inline-block;

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第11张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第12张图片

方法三:定位 position

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第13张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第14张图片

方法四:flex布局

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第15张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第16张图片

方法五:box布局

浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第17张图片
浅谈CSS居中问题(水平居中、垂直居中、水平垂直居中)_第18张图片

垂直居中

水平垂直居中

你可能感兴趣的:(web前端,css,html,flex,javascript)