我们在使用css来布局时经常需要进行居中，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，利用css来实现对象的垂直居中有许多不同的方法，比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中。模板社小编结合自己的网站建设织梦仿站经验，分3篇文章来给大家分类介绍下各类元素的居中实现方便。第一篇将介绍文字的居中；第二篇将介绍图片的居中；第三篇将介绍块元素的居中。

 

本文介绍下文字的居中

 

首先是水平居中，最简单的办法当然就是：
 

margin:0 auto;
 

也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。
 

文字的水平居中方法：
 

text-align:center 并且line-height设为height的值。

 

例子：
 

<div class="wrap">w3cschool</div>
 

<style type="text/css">

.wrap{margin:0 auto;line-height: 200px;text-align:center;height: 200px;font-size: 36px;background-color: #ccc;}

</style>