前端盒子居中顯示方法，前端上下左右居中

前端布局的時候總是會遇到一些需要居中的方案，下面是我平常使用的一些方法，當然還有很多的方法也能居中顯示。
1、寬高固定 – 使用絕對定位居中顯示
這兒一般是用在固定的大小的box中使用，如果相對定位的box大于屏幕不建議使用。
代碼如下：

<div class="box1">
<div></div>
</div>
<style type="text/css">
.box1{
position:relative;
height:500px;
width:500px;
background: #eee;
margin:0 auto;
}
.box1 div{
height:200px;
width:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
background: #999;
}
</style>

2、寬高固定 – 使用固定定位居中顯示

固定定位主要是一些彈出層使用比較好，而且在所有的高度的文檔中都可以使用。

代碼如下：

<div class="box2">
<div></div>
</div>
<style type="text/css">
.box2{
height:500px;
width:500px;
position:fixed;
left:50%;
top:50%;
margin:-250px 0 0 -250px;
background: #eee;}
</style>

3、寬高不固定 – 屏幕中間 – 使用jq來計算

有些時候咱們會遇到高度和寬度不固定的box需要居中的需求，這時候咱們可以使用js來計算box的寬高然后在控制他的margin來居中。

代碼如下：

<div class="box3"></div>
<style type="text/css">
.box3{
position:fixed;
left:50%;
top:50%;
width:600px;
height:600px;
background: #eee;
padding:20px;}
</style>
<script type="text/javascript">
$('.box3').css({
'margin-top':-$('.box3').outerHeight(true)/2+'px',//獲取總高/2
'margin-left':-$('.box3').outerWidth(true)/2+'px' //獲取總寬/2
});
</script>

4、不固定寬高 – CSS上下左右居中 – IE7及以上

當然使用純CSS也是可以辦得到的，這個有個前提條件最外層的box必須有高度，然后可以使用display: table;來居中，如果你不想兼容低版本瀏覽器的話可以使用這個方法，當然這個方法親測可以支持到IE7。

代碼如下：

<div class="box4">（www.gendan5.com）
<div>
<div>
<p>不固定寬高 - CSS上下左右居中 - IE7及以上</p>
<p>不固定寬高 - CSS上下左右居中 - IE7及以上</p>
<p>不固定寬高 - CSS上下左右居中 - IE7及以上</p>
<p>不固定寬高 - CSS上下左右居中 - IE7及以上</p>
<p>不固定寬高 - CSS上下左右居中 - IE7及以上</p>
</div>
</div>
</div>
<style type="text/css">
.box4{
height:500px;
width:500px;
display: table;
border-collapse: collapse;
margin:0 auto;
}
.box4>div{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.box4>div>div{
background:#eee;
padding:20px;
line-height:28px;
display:inline-block;
}
</style>

5、上下左右定位法 – CSS上下左右居中 – IE7及以上

其實這個方法是我偶然發現的，當初還真是被驚到了

代碼如下：

<div class="box5"></div>
<style type="text/css">
.box5{
position:fixed;
top:20%;
left:20%;
bottom:20%;
right:20%;
background:#999;
}
</style>