HTML CSS中如何实现DIV中的图片水平垂直居中对齐

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/img1jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4jpg" 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/gridBggif) 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>
实现效果如下：

:no-repeat为背景图不重复，最好是满足1280宽度的分辨率下位满屏，可以宽度为1280像素，第一个center为水平居中，第二个center为垂直居中，第二个center换成top也就是顶部显示背景图。

PPT幻灯片里面的进行水平垂直居中对齐的方法如下：

工具／原料：Dell游匣G15、win10、office2016

1、鼠标左键选中要调整位置的。

2、点击工具栏的开始－排列。

3、点击对齐。

4、我们可以看到大量的对齐方式，点击相对于幻灯片。

5、在里面可以根据需要选择左对齐，右对齐，靠上对齐，靠下对齐。

6、我们这里选择水平居中和垂直居中即可。

自动是不太可能的，不过我可以教你一个方法
1比如你建立一个画布，600×800MM
2调出标尺CTRL+R，在标尺的左上角的接合出，就是那个方块出，用鼠标单击不要放开，拉出一个十字线，一直拖拽到页面的左下角，这时候你可以先打开智能描点CTRL+U，也就是说将零点定义到画布的左下角，就像坐标中的XY轴一样，那就把你的页面座落于第一区间
3随意添加一个，然后选中，在变换面板中的，将的中心定义在中点，由于此时页面是以左下角为原点，所以只要将的XY坐标定义成300×400就可以了
这个方法有可能比较烦，但是可以利用他方便的定义坐标还是不错的
还有个方法就是首先画好画布，然后对象－裁剪标志－制作，这时候页面上会出现角线，然后再对象－裁剪标志－释放，这样就可以得到和页面一样大小的矩形框了，然后再用对齐面板对齐，全选，将前面得到的矩形框和一起拉回页面内，上下左右对齐，就OK了，这个是利用角线完成的，一般的初学者不会想到利用角线的，因为毕竟不用出片嘛

---