CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。
01新建一张文档
在桌面新建一张文本文档，改名为1.txt，如下图所示：
02基础代码
然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：
03后缀名
然后把文本文档后缀名改为.html，如下图所示：
04运行网页
然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：
05CSS代码
然后写上CSS代码，如下图所示：
06垂直水平居中
可以看到图片已经垂直和水平居中，如下图所示：
07总代码
<!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
.picTiger{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1.png">
</body>
<html>
CSS入门知识-图片水平对齐技巧
在CSS中，图片怎么水平对齐，有哪些技巧呢？我们一起来学习一下吧！
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
语法：
text-align:属性值
说明：
text-align属性取值如下表：
表1 text-align属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
p
{
width:300px
height:80px
border:1px solid gray
}
.p_img1{text-align:left}
.p_img2{text-align:center}
.p_img3{text-align:right}
img{width:60pxheight:60px}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在浏览器预览效果如下：
分析：
很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是p，img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（p元素）中设置text-align属性。
1、第一种css代码如图所示。display设置成table-cell，text-align为center，垂直居中设置vertical-align为middle。
2、打开浏览器查看结果，图片已处于正中状态。
3、第二种方法css代码如图。div设置成相对定位，img设置成绝对定位，然后left:50%，top:50%，此时图片的左上角将位于div的中心。重点：图片向上移动图片高度的一半，并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果，图片水平，垂直均居中。
