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

1、在html编辑器中，新建一个html文件，例如：index.html。

2、在index.html中的body标签中，填入html代码：

<div style="position: absolutetop: 50%left: 50%height: 10%width: 30%margin: -5% 0 0 -15%">123asfafada</div>

3、最后，浏览器运行index.html，此时html中的文字被成功垂直水平居中显示。

单行文字（即文字较少，不够一行）重直居中比较好解决，使用行高和高度相等即可。如：.abc{height:100pxline-height:100px}

多行文本垂直居中分两种情况

1、div高度不固定，使用padding属性，将上下空相等的间距即可，如：.abc{height:autopadding:20px 10px/*上下各空20px,左右空10px*/}

2、div固定高度文字重直居中（这种情况比较常见，稍微复杂些），思路，将div转化表格属性，因为表格是可以实现垂直居中的。需要多添加一个div层,具体如下：

样式代码：

.waiceng{

height:400px

display:table

}

.liceng{

vertical-align:middle

display:table-cell

border:1px solid #FF0099

background-color:#FFCCFF

width:760px

}

源代码：

<div class="waiceng">

<div class="liceng">现在我们要使这段文字垂直居中显示</div>

</div>

声明：上面的代码IE6不支持。不过现在没几个人用IE6了，可以忽略了

---