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

一、css图片水平居中。

1、利用margin: 0 auto实现图片居中，就是在图片上加上css样式margin: 0 auto 如下：

2、设置imgBox的样式如下：

3、此时的效果如下：（图片在容器内，水平居中）

二、css图片垂直居中。

1、css代码如下，使用flex布局实现。

2、页面代码HTML如下：

3、此时的效果如下：（垂直居中）

三、 css图片水平垂直居中。

1、利用flex布局实现css水平垂直居中，设计css代码如下：

2、Html代码如下：

3、此时的效果如下：（水平垂直居中）

扩展资料：

在容器上使用display: flex来告诉浏览器，这是一个flex布局的开始。然后给所有的item添加一个flex: 1的属性，来表明元素都是flex布局中的内容。

关于flex，最重要的就是要记住他有两条轴线（主轴、交叉轴），绝大部分属性都是依赖于轴线的方向。如下图所示：

这样，容器内的元素会沿着主轴来平分所有的区域，就这样已经实现了一个多列等宽布局。

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

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

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

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

水平居中的话就在img所在的标签设置text-align:center
垂直居中的话就在img上设置vertical-align:middle
至于水平垂直居中？这的问题与上面的已经重复了
例如：

其实很简单的，img{margin:0 auto} 把图片取成块 display:block margin:0 auto 看能不能水平居中

可以通过padding ,margin的值控制居中，如果有走位的，可以试试加个display:inline;