居中可分为垂直居中和水平居中,水平居中直接设置元素margin: 0 auto就可以实现。
首先在一个页面上写一个div,定义宽高为200px,背景颜色为蓝色:
要实现div的水平居中可直接在div中设置margin: 0 auto;
而垂直居中则相对复杂,在实现垂直居中之前要先把div的祖先元素html和body的宽高设置为100%,因为他们默认的是0,所以要清除样式,即把margin和padding都设置为0。
然后需要让div上下移动,一般top属性可以使得元素向下偏移,但由于默认情况下,position的值为static,就是静止的无法移动,元素在在文档流里是从上往下,从左到右紧密的布局的,所有不能直接通过top和left属性改变他的偏移。所以要移动元素的位置就要把position设置为不是static的其他值,如relative,absolute,fixed等。然后就可以通过top,bottom,right,left等属性使他在文档中发生位置偏移。其中relative是不会使元素脱离文档流,absolute和fixed则会,也就是说relative会占据着移动之前的位置,但是absolute和fixed不会。
设置position:relative:
此时页面还没有任何变化,因为还没有设置他的垂直偏移。垂直偏移需要用到top属性,他的值可以是具体的像素(px)也可以是百分数(%)。因为我们不知道父元素body的具体高度,所以是不可以通过像素来偏移的,因而要用百分数。因为要居中所以设值为50%:
效果如图所示:
如效果图所示,div在垂直方向上并没有居中,但是明显下移了,因此要让div向页面的中心移动。
通过观察可以看出来div是在页面中心位置之下,因此只要将div向上移div高的一半就可以实现div的垂直居中了。这时候可以通过使用margin-top属性来设置,因为div自身的高度是200px,所以需要设置他的margin-top值为-100。因为要向上偏移所以要用负数。
由效果图可以看到,div已经垂直居中了。