今天看到一道面试题,怎么样一个div水平垂直居中,当时想到的就是绝对定位+top和left,却忘了再通过margin进行修正,于是拿出css权威指南,重新复习了下定位的知识,写个总结:
一.水平居中
<style>
#box{
width: 300px;
height: 200px;
border: solid black;
background-color: bisque;
margin: 0 auto;
}
</style>
<div id="box"></div>
auto:浏览器根据剩余空间自动定位距离,当左右都设置为auto的时候,保证左右剩余空间相同,就变成了居中。要注意的是:只对左右设置有用,上下没用,所以不能通过这种方式达到垂直居中目的。
二.水平垂直居中
方式1:
<style>
#box{
width: 300px;
height: 200px;
border: solid black;
background-color: bisque;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
}
</style>
<div id="box"></div>
首先position绝对定位,再把top right bottom left都巧妙设置成0,最后设置margin为auto,浏览器就自动在div上下和左右都留下相等的间距,达到了水平和垂直都居中的目的。
方式2:
<style>
#box{
width: 300px;
height: 200px;
border: solid black;
background-color: bisque;
position: absolute;
top:50%;
left:50%;
margin-top:-100px; /*高度的一半*/
margin-left: -150px;/*宽度的一半*/
}
</style>
<div id="box"></div>
top和left都是针对div左上角那个点定位的,所以都设置了50%,相当于把div左上角那个点定位到了浏览器正中间,再通过margin-top和margin-left修正位置。
方式3:
<style>
#box{
width: 300px;
height: 200px;
border: solid black;
background-color: bisque;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
<div id="box"></div>
原理与方式二相同,不同点在于利用css3里面的transform属性进行位置的修正
如果还有其他常用的方式,欢迎在文章下面留言补充,谢谢
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。