CSS文字垂直居中

html-css012

CSS文字垂直居中,第1张

01

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

02

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

03

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

04

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

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

05

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

1. 设置 margin: 0 auto

单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。

图片垂直居中，设置上下padding（父元素高估不设置）。

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

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

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

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

1、第一种css代码如图所示。display设置成table-cell，text-align为center，垂直居中设置vertical-align为middle。

2、打开浏览器查看结果，图片已处于正中状态。

3、第二种方法css代码如图。div设置成相对定位，img设置成绝对定位，然后left:50%，top:50%，此时图片的左上角将位于div的中心。重点：图片向上移动图片高度的一半，并向左移动图片宽度的一半。正好为与div正中间。

4、在浏览器查看结果，图片水平，垂直均居中。