CSS布局 水平垂直居中

40 阅读1分钟

一、实现div水平、垂直居中

image.png

代码实现:

使用flex布局,但是注意body与html要有高度。

image.png

二、inline元素水平处置居中

image.png

代码实现:

  • span水平居中text-align:center就可以实现
  • 垂直居中就是line-height的值与height的值相等即可
image.png

三、block元素水平、垂直居中

image.png

代码实现:

  • 使用margin:0 auto就可以实现
image.png image.png

想要垂直居中,推荐一个简单的方法:flex,可以处理不定宽高情况

image.png

代码实现:

image.png