1、首先先在页面里加载一张，代码和效果如下图所示：
2、然后设置给起一个class名，方便一会儿的 *** 作。
3、然后给设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到已经实现了。
6、最后给大家附上全部的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用CSS让水平垂直居中</title>
</head>
<body>
<img class="pic" src="img/timgjpg" alt="" />
</body>
<style type="text/css">
pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</html>
方法一：
思路：利用text-align属性将水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
<div>
<img src="images/ttgif" width="150" height="100" />
</div>
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：
释义：
的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用的margin属性将水平居中，利用DIV的padding属性将垂直居中。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现的水平居中；（有的设计师为再加个div标签，然后通过div标签的margin实现居中
CSS是层叠样式表。下面，我们来看看怎么使用CSS让水平垂直都居中吧。
新建一张文档在桌面新建一张文本文档，改名为1txt，如下图所示：
基础代码然后打开文本文档，编写基础代码，再把桌面上的老虎引入进去，如下图所示：
后缀名然后把文本文档后缀名改为html，如下图所示：
运行网页然后在浏览器中运行网页，现在有了，只是还没有居中，居住代码要用CSS写，如下图所示：
CSS代码然后写上CSS代码，如下图所示：
垂直水平居中可以看到已经垂直和水平居中，如下图所示：
总代码 <!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/1jpg">
</body>
<html>
bottom
no-repeat;前面是url路径
全部的位置代码如下：
background-position:
left;
代表背景图横向（x轴）靠左，纵向（y轴）居中。（9点钟位置）
background-position:
right;
代表背景图横向（x轴）靠右，纵向（y轴）居中。（3点钟位置）
background-position:
top;
代表背景图横向（x轴）居中，纵向（y轴）靠上。（12点钟位置）
background-position:
bottom;
代表背景图横向（x轴）居中，纵向（y轴）靠下。（6点钟位置）
background-position:
center;
代表背景图横向（x轴）居中，纵向（y轴）居中。（绝对居中）
background-position:
left
top;
代表背景图横向（x轴）靠左，纵向（y轴）靠上。（10点钟位置）
background-position:
left
bottom;
代表背景图横向（x轴）靠左，纵向（y轴）靠下。（7点钟位置）
background-position:
right
top;
代表背景图横向（x轴）靠右，纵向（y轴）靠上。（1点钟位置）
background-position:
right
bottom;
代表背景图横向（x轴）靠右，纵向（y轴）靠下。（5点钟位置）在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的，定义相对定位的CSS。直接上CSS代码：#pic{width:300px;height:300px;background-color:green;border:6pxsolid#ccc;text-align:center;position:relative;display:table-cell;vertical-align:middle;}#picp{position:absolute;top:50%;left:50%;}#picpimg{position:relative;top:-50%;left:-50%;}#pic是容器，里面放一个p容器，该容器采用绝对定位，最后插入，采用相对定位。这里用到了一个hack,只有IE浏览器可以识别，Firefox不认识
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）