CSS水平居中与垂直居中的总结

html-css019

CSS水平居中与垂直居中的总结,第1张

1. 设置 margin: 0 auto

单行文本垂直居中,通过设置行高为父元素高度(父元素高度已知)。

图片垂直居中,设置上下padding(父元素高估不设置)。

图片垂直居中,下边这种方法会有一定偏差(父元素高估不设置)。

图片垂直居中,图片作为背景。

1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

行内元素可可以转换为inline-block实现居中。

01

先写上html代码,如图,内容很简单,就是一个div里有一段文本。

02

再写上div对应的样式,如图,这里只设置了div的边框和高度,宽度。

03

如果这里显示的话,我们看下页面,文本是不会水平居中和垂直居中的。

04

要让文本水平居中,我们可以添加样式:text-align: center

要让文本垂直居中,我们可以添加样式: vertical-align: middle和display: table-cell

05

添加完这几个样式后,刷新页面可以看到现在的文本已经可水平居中和垂直居中了。