用两种方法来实现一个背景色为红色、宽度为960px的div在浏览器中居中
1)首先来分析一下居中,如果一个固定宽度的div的最左最右两端到浏览器窗口的距离是相同的,那么这样这个div相对于浏览器是水平居中的。 题目由于给定了宽度,使用margin:0 auto;两边的距离自适应,就可以让这个div水平居中了
<style>
.box{
width: 960px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
<body>
<div class="box"></div>
</body>
2)利用text-align:center;给要居中的div加一个包裹层,然后对这个包裹层设置text-align:center。和IFC原理有关,待了解。
但是这样设置包裹层里的行内元素才会实现居中的效果,由于div宽度设定为960px,
所以给div加上display:inline-block;
但是这个方法加深了嵌套,使用了额外标签。
<style>
body{
margin: 0;
}
.wrap{
text-align: center;
}
.box{
width: 960px;
height: 100px;
background-color: red;
display: inline-block;
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
3)利用绝对定位来实现
水平居中也可以说是div的竖直的对称轴和浏览器窗口的竖直的对称轴完全重合。那么只要想办法把这两个对称轴重合就可以实现了。
首先给这个div加上绝对定位
<style>
body{
margin: 0;
}
.box{
position: absolute;
width: 960px;
height: 100px;
background-color: red;
}
</style>
然后对这个div设置left:50%,这样这个div会移动半个浏览器窗口。也就是说这个div的最左边的边从开始的位置(窗口最左边)移动到浏览器窗口的中间。
.box{
position: absolute;
left:50%;
width: 960px;
height: 100px;
background-color: red;
}
而我们的目标是这个div的对称轴和浏览器窗口的对称轴对齐。那么,此时只要将div的最左端移动div的宽度的一半,那么就能实现了。可以使用负边距来移动这个div的一半。
.box{
position: absolute;
left:50%;
margin-left: -480px;
width: 960px;
height: 100px;
background-color: red;
}
这个方法除了用绝对定位脱离文档流之外,在把浏览器窗口缩小到一定小时还会产生一点小问题。因为这个方法margin-left值设置为负边距,而其他方法下缩小窗口margin值最小是0。
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html
这篇文章中讲解负边距,最后提到了对绝对定位的影响…..我还不是很明白….待研究
这几种方法在不定宽度的div上的区别
第一种margin值的方法,需要明确宽度。那么不定宽度就没办法生效了。
第二种外层text-align:center;内层display:inline-block。这种方法可以在没有宽度和高度的情况下实现,内层的宽和高随内容变化。
.box2{
display: inline-block;
text-align: left;
/*width: 960px;*/
/*height: 100px;*/
background-color: #fff458;
}
第三种
在不知道div的宽度的情况下,和上面定宽最大区别的一步就是要让div的一半向左移动。
CSS3中有transform变换,这样可以实现移动的功能
.box1{
position: absolute;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%); /* IE 9 */
-moz-transform: translateX(-50%); /* Firefox */
-webkit-transform: translateX(-50%); /* Safari 和 Chrome */
-o-transform: translateX(-50%); /* Opera */
height:100px;
background-color: #79ff5a;
}
如果不用css3中这个属性……
那就这样:
第一步:给div加一个包裹层。然后来看效果发现这个div是块状元素,占了一行。这时候就自然想到给这个包裹层加上display:inline-block,或者用浮动的方法,其实就是为了让这个包裹层的宽度自适应它里面的内容。
第二步:这样之后,就和定宽的居中方法类似,首先把元素最左端移动到浏览器窗口对称轴。给包裹层加上position: relative;和left: 50%;
以上两步用绝对定位也是一样的效果,….上面这两步中的给包裹层设置浮动或者改变display再设置为相对定位都可以直接设置它为绝对定位。设置了绝对定位后元素宽度自适应,再有是包裹层相对父元素也就是body向左移动一半的距离,效果是一样的。
![加了相对定位后](https://img-blog.csdn.net/20160924175046876)
第三步:最后把div往左移动它的一半就可以居中了,给div加上position:relative; left:-50%;这个就是相对自己最开始那个位置来左移嘛…..这个要是用绝对定位的话….父元素就变成了一个点了,因为脱离了文档流。
<style>
body{
margin: 0;
}
.box1{
position: relative;
left: -50%;
background-color: #79ff5a;
}
.wrap2{
position: relative;
display: inline-block;/*也可以改为float:left;*/
left: 50%;
border: 1px solid aquamarine;
}
</style>
<body>
<div class="wrap2">
<div class="box1">positionpositionpositionposition</div>
</div>
</body>
还算初学者…以上是看了网上的一些方法自己的一些理解
有错误请多指点谢谢~