水平垂直居中是页面布局中及其常见的样式,关于实现方式也是多种多样,闲话少说,我们直接进去正题。
首先做一下基础布局:
<div class="outer">
<div class="inner"></div>
</div>
这里我们给出了两个div,然后我们来给这两个div写一下初始样式:
.outer{
height:200px;
width:200px;
border:1px solid #000;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
}
现在我们能看到这两个div是这样显示的:
好了,前戏到此为止,下面是重头戏了。
方法一:采用绝对定位,计算定位距离
.outer{
height:200px;
width:200px;
border:1px solid #000;
position:relative;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
position:absolute;
top:50px; /*(父元素高度-子元素高度)/2*/
left:50px; /*(父元素宽度-子元素宽度)/2*/
}
哦啦,就是如此的简单,我们来看看效果:
这种方法要根据父子元素的宽高来计算top和left的值,如果页面布局复杂起来,每一个都这样计算岂不是要烦死我这样的数学白痴?个人觉得这种方法有点太粗暴了。
方法二:采用绝对定位,巧妙使用margin:auto
.outer{
height:200px;
width:200px;
border:1px solid #000;
position:relative;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
position:absolute;
top:0px;
bottom: 0px;
left:0px;
right:0px;
margin:auto;
}
好啦,来看效果
也可以实现,完全no problem! 只需要父元素相对定位,子元素绝对定位,然后设置top,bottom,left,right都为0,再设置margin:auto(这时浏览器会给margin-left,margin-right相同的值,margin-top,margin-bottom相同的值,使元素块在父元素中水平垂直居中)即可。
注意:利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。
方法三:采用绝对定位,利用负边距
.outer{
height:200px;
width:200px;
border:1px solid #000;
position:relative;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
position:absolute;
top:50%;
left: 50%;
margin-top:-50px; /* 子元素高度的一半 */
margin-left:-50px; /* 子元素宽度的一半 */
}
看,居中了:
这种方法也很容易理解的,来我们简单说一哈,当我们设置了left和top各为50%时,子元素左边界距父元素左边界50%,上边界距父元素上边界50%,其实此时,我们可以知道,子元素的左上角这个点,是水平垂直居中的,当我们设了负边距时,我们可以理解为这个子元素向右向上各移了自身长度的一半,这就达到了水平垂直居中。
注意:利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比,且负边距值与padding和是否定义box-sizing: border-box有关,计算需要根据不同情况。
方法四:transform用起来
.outer{
height:200px;
width:200px;
border:1px solid #000;
position:relative;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
position:relative;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
来,直接上图:
这种方法和上一种方法的原理差不多,只是把上面的margin换成了transform,这种处理方式的好处在于我们不需要知道子元素的宽高,直接用-50%就完事儿了。
注意:利用transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但transform IE8不支持。
方法五:flex布局
.outer{
height:200px;
width:200px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
height: 100px;
width:100px;
border:1px solid #000;
}
看效果:
Flex布局即为弹性布局,只需将父元素设置三个属性即可(display,justify-content,align-items)。
注意:利用flex方法代码量少,不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持。
总结:
方法介绍完了,问题讲清楚了,废话我就不多说了哦,完结撒花~~~