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
avatar
文章
阅读
粉丝