先写上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实现居中。