居中算是Web页面制作中最基本的设计需求之一了,这篇文章就说说css和js实现居中的一些方案,以及采取这些方案的条件。
1.水平居中
看到水平居中,我们就想到 margin:0 auto; 就这么一句,很简单,但是使用这种自适应居中也是有条件的。
首先,我们必须要知道容器的宽度,以设置width属性。其次,对容器定位也有要求,position:absolute 就会使居中失效。
那么当我们无法确定宽度的时候,要如何处理水平居中呢?有一种相对+浮动的解决方案,看一下下面的代码:
HTML:
<div id="outter">
<span id="inner">123</span>
</div>
CSS:
#outter{
position: relative;
left: 50%;
float: left;
}
#inner{
position: relative;
right: 50%
}
不过这种方案的缺点也很明显,用到浮动会造成其他的一些布局问题,比如父容器的高度被清除等等。但是相对于其他一些方法,比如inline-block,算是较优解法了。
2.垂直居中
主要推荐一篇文章:http://sofish.de/1909
文章里介绍了三种垂直居中的方案,在知道元素高度的情况下,当然第一种方法是最适合的。作者推荐的通用解决方案也是种不错的解法。
3.js辅助居中
在无法知道宽高的时候,用js DOM的offsetWidth/offsetHeight属性取得容器宽高,然后设定绝对定位。或是配合position: relative,取得元素的宽高,设置margin-top/left的值。也是种简单且使用的做法。