我们在使用 CSS 来布局时经常需要进行居中,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中,而margin: auto;却不能做到垂直居中…… 下面就 CSS 居中的一些常用方法做个集中的介绍。
首先是水平居中,最简单的办法当然就是:
margin:0 auto;
也就是将 margin-left 和 margin-right属性设置为 auto,从而达到水平居中的效果。
文字的水平居中方法:
利用 line-height 设为 height 的一样即可:
实例
.wrap{
line-height: 200px;/*垂直居中关键*/
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}
尝试一下 » |