css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

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

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

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

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

水平居中：

行内元素：可以父级利用text-align: center进行水平居中

块级元素：

①可以利用margin: 0 auto进行水平居中

②使用position决定定位

利用margin-left进行左偏移

利用transform进行左偏移

③使用flex布局

垂直居中：

内联元素：可以使用line-height进行垂直居中

块级元素：

①使用position定位

利用margin-top进行上偏移

利用transform进行上偏移

②使用flex布局

常用的基本就这些，当然还有grid布局，父级设置为table布局，进行设置等方案，这边不做过多赘述。

---