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

html-css012

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

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、在浏览器查看结果,图片水平,垂直均居中。