Front-end layout of the time will always encounter some need centered program, the following are some ways I normally use, of course, there are many ways can be centered.
1, the high fixed width - absolute positioning centered
here is generally used in a fixed box size is used, if larger than the screen box relative positioning is not recommended.
code show as below:
<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, the high fixed width - fixed positioned centered
Fixed positioning mainly some pop layer is better to use, and can be used in all the height of the document.
code show as below:
<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, is not fixed width and height - center of the screen - used to calculate jq
Sometimes we encounter the height and width of the box need not be fixed centered demands, this time we can use js to calculate the width and height of the box and then control his margin to center.
code show as below:
<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, the fixed width is not high - around the vertical center CSS - IE7 and above
Of course, using pure CSS also can do it, and that there is a precondition for the outermost box must have a high degree, then you can use display: table; to center, if you do not want is compatible with low version of the browser, then you can use this method, of course, pro-test method can support up to IE7.
code show as below:
<div class = "box4"> (www.gendan5.com)
<div>
<div>
<P> is not a fixed width and height - about the vertical center CSS - IE7 and above </ P>
<P> is not a fixed width and height - CSS vertical and horizontal center - IE7 and above </ p>
<P> is not a fixed width and height - about CSS vertical centering - IE7 and above </ p>
<P> is not a fixed width and height - is centered around CSS vertical - IE7 and above </ p >
<P> is not a fixed width and height - about the vertical center CSS - IE7 and above </ P>
</ div>
</ div>
</ div>
<style type = "text / CSS">
.box4 {
height: 500px;
width: 500px;
the display: Table;
border-Collapse: Collapse;
margin: Auto 0;
}
.box4> {div
the display: Table-Cell;
Vertical-align = left: Middle;
text-align = left: Center;
}
.box4> div>div{
background:#eee;
padding:20px;
line-height:28px;
display:inline-block;
}
</style>
5, vertical and horizontal positioning method - centered vertically about CSS - IE7 and above
In fact, this method is what I discovered by accident, had really been scared to
code show as below:
<div class="box5"></div>
<style type="text/css">
.box5{
position:fixed;
top:20%;
left:20%;
bottom:20%;
right:20%;
background:#999;
}
</style>