1、前端用到的编辑器有很多，本例通过选择SublimeText3编辑器来实现文字居中的制作。第一步，打开电脑中安装的SublimeText3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。
2、第二步，在顶部head标签里引入外部CSS文件。当然，因为本例比较简单，就直接写在style标签里了。建议实际开发应该写在外部CSS文件中。
3、第三步，在Body中写简单的html代码。在一个容器div中，给一个类名，然后加一个子div，命名类名，用来填充文字。子div中加一个h标签，引入文字，随便写几个文字。
4、第四步，写父级div的样式。其主要作用是包裹子级div。为了看得比较明显，加一个边框样式：border：1pxsolid#093。
5、第五步，写主要的字div样式。设置长度和宽度，以及边框样式；文字颜色以及字体大小；接着以一张作为背景，不重复：background:url(images/0jpg)no-repeat。如图。你也可以随时在浏览器中查看效果。可以看到，此时，文字是在最上面。
6、第六步，接着是最关键的部分，设置文字居中于，包括垂直和水平方向上的居中。其中，line-height：630px，使行高等于高度，文字即可在垂直方向居中；text-align:center，实现水平居中。
直接用no-repeat就可以了body{background:url(>
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>
<img src="2008081801331242gif"/> 这是的代码 你可以这样写他们的宽高<img src="2008081801331242gif" width="300" height="300" alt="我是哦!"/>还有加上alt注释了!让局中是让在什么地方局中哦! 你可以用<div align="center"></div> 用<p align="center"> 用<td align="center"></td>都可以的呵呵欢迎采纳有什么不懂的再问我哦!欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）