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>
:no-repeat为背景图不重复，最好是满足1280宽度的分辨率下位满屏，可以宽度为1280像素，第一个center为水平居中，第二个center为垂直居中，第二个center换成top也就是顶部显示背景图。1、首先先进行文本框的插入，在word文档编辑界面上，单击上方工具栏中的“插入”按钮，包括文本框，所有的插入选项都在这里。
2、在“插入”选项的下拉工具栏中，选择如图所示“文本框”图标单击。
3、接下来会d出文本框样式的选择框，在里面可以根据需要选择文本框样式。这里以简单文本框为例，单击选择框中的”简单文本框“。
4、在文档编辑区出现的如图所示文本框中，将原有的选择文字删去就可以编辑文字了。
5、编辑好文字后，选中刚才编辑的文字。接下来进行的是对于文字居中了。
6、单击上方工具栏中的“开始”选项，会出现下拉工具栏。关于文本的设置就在这里。
7、在“开始”选项的下拉工具栏中，“段落”设置中的“居中”设置。
8、至此设置完毕，可看到文本框中选中的文字已经在文本框中央，单击任意空白处取消选中即可。
9、完成效果如下。
写个简单的例子给你吧
htlm如下：
<h4>水平居中</h4>
<div class="demo1">
<img src="你的" alt="">
</div>
<h4>垂直居中</h4>
<div class="demo2">
<div class="imgbox">
<img src="你的" alt="">
</div>
</div>
<h4>水平垂直居中</h4>
<div class="demo3">
<div class="imgbox">
<img src="你的" alt="">
</div>
</div>
css如下：
<style type="text/css">
demo1{width: 200px;height: 200px;border: 1px solid #ccc;display: inline-block;text-align: center;}
demo1 img{width: 100px;height: auto;}
demo2{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}
demo2 imgbox{display: table-cell;vertical-align: middle;}
demo2 imgbox img{width: 100px;height: auto;}
demo3{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}
demo3 imgbox{display: table-cell;vertical-align: middle;text-align: center;}
demo3 imgbox img{width: 100px;height: auto;}
</style>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）