HTML CSS中如何实现DIV中的图片水平垂直居中对齐 如何使文字在div中水平和垂直居中的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

\u4e00\u3001css\u56fe\u7247\u6c34\u5e73\u5c45\u4e2d\u3002
1\u3001\u5229\u7528margin: 0 auto\u5b9e\u73b0\u56fe\u7247\u5c45\u4e2d\uff0c\u5c31\u662f\u5728\u56fe\u7247\u4e0a\u52a0\u4e0acss\u6837\u5f0fmargin: 0 auto \u5982\u4e0b\uff1a

2\u3001\u8bbe\u7f6eimgBox\u7684\u6837\u5f0f\u5982\u4e0b\uff1a

3\u3001\u6b64\u65f6\u7684\u6548\u679c\u5982\u4e0b\uff1a\uff08\u56fe\u7247\u5728\u5bb9\u5668\u5185\uff0c\u6c34\u5e73\u5c45\u4e2d\uff09

\u4e8c\u3001css\u56fe\u7247\u5782\u76f4\u5c45\u4e2d\u3002
1\u3001css\u4ee3\u7801\u5982\u4e0b\uff0c\u4f7f\u7528flex\u5e03\u5c40\u5b9e\u73b0\u3002

2\u3001\u9875\u9762\u4ee3\u7801HTML\u5982\u4e0b\uff1a

3\u3001\u6b64\u65f6\u7684\u6548\u679c\u5982\u4e0b\uff1a\uff08\u5782\u76f4\u5c45\u4e2d\uff09

\u4e09\u3001 css\u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u3002
1\u3001\u5229\u7528flex\u5e03\u5c40\u5b9e\u73b0css\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u8bbe\u8ba1css\u4ee3\u7801\u5982\u4e0b\uff1a

2\u3001Html\u4ee3\u7801\u5982\u4e0b\uff1a

3\u3001\u6b64\u65f6\u7684\u6548\u679c\u5982\u4e0b\uff1a\uff08\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff09

\u6269\u5c55\u8d44\u6599\uff1a
\u5728\u5bb9\u5668\u4e0a\u4f7f\u7528display: flex\u6765\u544a\u8bc9\u6d4f\u89c8\u5668\uff0c\u8fd9\u662f\u4e00\u4e2aflex\u5e03\u5c40\u7684\u5f00\u59cb\u3002\u7136\u540e\u7ed9\u6240\u6709\u7684item\u6dfb\u52a0\u4e00\u4e2aflex: 1\u7684\u5c5e\u6027\uff0c\u6765\u8868\u660e\u5143\u7d20\u90fd\u662fflex\u5e03\u5c40\u4e2d\u7684\u5185\u5bb9\u3002
\u5173\u4e8eflex\uff0c\u6700\u91cd\u8981\u7684\u5c31\u662f\u8981\u8bb0\u4f4f\u4ed6\u6709\u4e24\u6761\u8f74\u7ebf\uff08\u4e3b\u8f74\u3001\u4ea4\u53c9\u8f74\uff09\uff0c\u7edd\u5927\u90e8\u5206\u5c5e\u6027\u90fd\u662f\u4f9d\u8d56\u4e8e\u8f74\u7ebf\u7684\u65b9\u5411\u3002\u5982\u4e0b\u56fe\u6240\u793a\uff1a

\u8fd9\u6837\uff0c\u5bb9\u5668\u5185\u7684\u5143\u7d20\u4f1a\u6cbf\u7740\u4e3b\u8f74\u6765\u5e73\u5206\u6240\u6709\u7684\u533a\u57df\uff0c\u5c31\u8fd9\u6837\u5df2\u7ecf\u5b9e\u73b0\u4e86\u4e00\u4e2a\u591a\u5217\u7b49\u5bbd\u5e03\u5c40\u3002

\u4f7f\u6587\u5b57\u5728div\u4e2d\u6c34\u5e73\u548c\u5782\u76f4\u5c45\u4e2d\u7684\u7684css\u6837\u5f0f\u4e3a
text-align:center; /*\u6c34\u5e73\u5c45\u4e2d*/line-height: 20px; /*\u884c\u8ddd\u8bbe\u4e3a\u4e0ediv\u9ad8\u5ea6\u4e00\u81f4*/\u793a\u4f8b\u5982\u4e0b\uff1a
HTML\u5143\u7d20
\u6c34\u5e73\u5782\u76f4\u5c45\u4e2dcss\u6837\u5f0f
div{width:200px;height:200px; /*\u8bbe\u7f6ediv\u7684\u5927\u5c0f*/border:1px solid green; /*\u8fb9\u6846*/text-align: center; /*\u6587\u5b57\u6c34\u5e73\u5c45\u4e2d\u5bf9\u9f50*/line-height: 200px; /*\u8bbe\u7f6e\u6587\u5b57\u884c\u8ddd\u7b49\u4e8ediv\u7684\u9ad8\u5ea6*/overflow:hidden;}\u663e\u793a\u6548\u679c

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>

css代码：

<style type="text/css">
.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;/*图片容器以表格的单元格形式显示*/
text-align: center; /* 实现水平居中 */
vertical-align: middle; /*实现垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd;
}
.imgWrap img {
border: solid 1px #66f;
vertical-align: middle; /*图片垂直居中*/
}
</style>
实现效果如下：

图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center;

如果只能用图片

分两种情况：
1.图片宽高固定，这种情况很简单。
水平居中：就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。

2.图片高度未知，这个布局比较难实现。一般我是用js做的。
水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。

曾经研究过网上的很多方法，个人觉得这个是最有效的了。

• 如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就解决了水平居中。

• 使用display:table-cell和设置了display:inline-block的线合span，这样就解决垂直居中。

display: flex;
justify-content: center;
align-items: center;
建议你应该先学习一下弹性布局

扩展阅读：javascript入门 ... htmlcssjs手机编辑器下载 ... html用什么软件打开 ... html+css代码大全 ... html+css网页制作成品 ... html+css实现图片轮播 ... html5 css3视频教程 ... 调整图片位置html css ... html+css+javascript ...