CSS的居中有很多种。主要分为垂直和水平两个方向。大部分方法是通用,因为height的margin设为auto会将上下边距自动设为0,因此会在某些具体的方法上略有区别。本文将居中的实现方法,测试一下,并截图出表现效果。
Html代码:
<body>
<div id="wrap">
<div class="father">
父元素
<div class="center">
居中元素
</div>
父元素
</div>
</div>
</body>
对齐方式:
1。负边距对齐:这个方法利用定位将中间基准线与父元素左边框重合,子元素(居中元素)再左外边距边框离中间准线50%达到居中目的。
.father{
background: lightpink;
border:solid pink 1px;
position: relative;
left:50%;
height: 100px;
width:500px
}
.center{
background: red;
border:dashed green 1px;
height: 40px;
width:100%;/*width 一定要是100% ,不能使用具体宽度。父元素*/
position: relative;/*负边距方法:relative 父元素不塌陷
absulate 父元素塌陷*/
left: -50%;/*与父元素的宽度做比例*/
}
效果如图:
2。”margin : 0 auto” 方法,该方法利用 margin:auto 的特性,在浏览器渲染过程中将左右边距自动计算为剩余空间的一半,达到居中的目的。
<style >
/**{border:solid 1px;}*/
#wrap{
position: relative;
}
.father{
background: lightpink;
border:solid pink 1px;
position: relative;
height: 100px;
width:500px
}
.center{
background: red;
border:dashed green 1px;
height: 40px;
width:60%;
margin:0 auto;
}
</style>
效果如下:
3。数值计算法:在父元素与子元素的宽度都是已知的情况下,可以通过计算获得居中效果。如题中,假设居中元素宽为 60px 。则left = ( father.width - center.width )/2 = 220px。不需要考虑边框的原因,因为border属性是以左边为基准线计算。
<style >
/**{border:solid 1px;}*/
#wrap{
position: relative;
}
.father{
background: lightpink;
border:solid green 50px;
height: 100px;
width:500px;
position: relative;
}
.center{
background: red;
border:dashed green 15px;
height: 40px;
width:60px;
position: relative;
left:219px;
}
</style>
效果如下:
为了更加明显地表示出边框宽度对其没有影响,使用加宽的绿色来标记father 和 center 的边框。