css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中 HTML CSS中如何实现DIV中的图片水平垂直居中对齐
css html \u5982\u4f55\u5c06\u56fe\u7247img\u6807\u7b7e \u6c34\u5e73\u5c45\u4e2d \u5782\u76f4\u5c45\u4e2d \u548c\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u80fd\u81ea\u9002\u5e94\u6d4f\u89c8\u5668\u7f29\u653e\u3002img{ display: block; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0); }
HTML CSS\u4e2d\u5b9e\u73b0DIV\u4e2d\u7684\u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u7684\u65b9\u6cd5\uff1a
\u6240\u8c13\u7684\u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u5c31\u662f\u628a\u56fe\u7247\u653e\u5728\u4e00\u4e2a\u5bb9\u5668\u5143\u7d20\u4e2d\uff08\u5bb9\u5668\u5927\u4e8e\u56fe\u7247\u5c3a\u5bf8\u6216\u662f\u6307\u5b9a\u4e86\u5927\u5c0f\u7684\u5bb9\u5668\uff09\uff0c\u5e76\u4e14\u56fe\u7247\u4f4d\u5c45\u6b64\u5bb9\u5668\u6b63\u4e2d\u95f4\uff08\u4e2d\u95f4\u662f\u6307\u5143\u7d20\u5bb9\u5668\u7684\u6b63\u4e2d\u95f4\uff09\uff0c\u800c\u56fe\u7247\u4e0d\u662f\u4ee5\u80cc\u666f\u56fe\u7247\uff08background-image\uff09\u5f62\u5f0f\u5c55\u793a\uff0c\u662f\u4ee5\u5143\u7d20\u5f62\u5f0f\u5c55\u793a\u7684\u3002\u5982\u4e0b\u56fe\u6240\u793a\uff1a
1\u3001\u89e3\u51b3\u6c34\u5e73\u5c45\u4e2d\u7684\u529e\u6cd5\uff1a\u5982\u679c\u56fe\u7247\u5de6\u6d6e\u52a8\u5e76\u4e14"display:inline"\u65f6\uff0c\u53ea\u8981\u7ed9\u56fe\u7247\u8bbe\u7f6e\u4e00\u4e2a"text-align:center"\u5c5e\u6027\uff0c\u5c31\u987a\u5229\u89e3\u51b3\u4e86\u6c34\u5e73\u5c45\u4e2d\u3002
2\u3001\u89e3\u51b3\u5782\u76f4\u5c45\u4e2d\u7684\u529e\u6cd5\uff1a\u4f7f\u7528display:table-cell\u548c\u8bbe\u7f6e\u4e86display:inline-block\u7684\u7ebf\u5408span\u3002
\u5b8c\u6574\u4f8b\u5b50\uff1a
html\u4ee3\u7801\uff1a
css\u4ee3\u7801\uff1a
.imgWrap li {float: left;border: solid 1px #666;margin: 10px 10px 0 0;list-style: none;border-collapse: collapse; }.imgWrap a {background: #ffa url(images/gridBg.gif) repeat center;width: 219px;height: 219px;display: table-cell;/*\u56fe\u7247\u5bb9\u5668\u4ee5\u8868\u683c\u7684\u5355\u5143\u683c\u5f62\u5f0f\u663e\u793a*/text-align: center; /* \u5b9e\u73b0\u6c34\u5e73\u5c45\u4e2d */vertical-align: middle; /*\u5b9e\u73b0\u5782\u76f4\u5c45\u4e2d*/}.imgWrap a:hover {background-color: #dfd;}.imgWrap img {border: solid 1px #66f;vertical-align: middle; /*\u56fe\u7247\u5782\u76f4\u5c45\u4e2d*/}\u5b9e\u73b0\u6548\u679c\u5982\u4e0b\uff1a
一、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
至于水平垂直居中？这的问题与上面的已经重复了
例如：
<div style="text-align:center; width:100px; height:40px;"><img src="图片" style="vertical-align:middle;" width="16" height="16" /></div>
其实很简单的，img{margin:0 auto} 把图片取成块 display:block margin:0 auto 看能不能水平居中
可以通过padding ,margin的值控制居中，如果有走位的，可以试试加个display:inline;
扩展阅读：htmlcss网页设计成品 ... html+css实现图片轮播 ... 女孩m型坐姿图片 ... html图片一排css ... html+css网页制作成品 ... 调整图片位置html css ... html+css图片轮播代码 ... img图片居中css ... 图片居中怎么设置html css ...
