Front-end CSS vertical centering and adaptive problems

this CSS function is to adapt the container-fluid background of the following Div structure to the screen,content self-adapting centering

1.Div structure

All

Head

Container-fluid

Content

Under

<div id= "All" >
<div class= "Head" style= "height:81px;width:100%;min-width:1000px;position:relative;" >

</div>
<div class= "Container-fluid" style= "Background:url (/caunion/image/backgroud.jpg) No-repeat Center Center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
min-height:480px;
min-width:1000px; ">
<div class= "Content" >

</div>
</div>
<div id= "under" style= "Margin:auto auto;bottom:0px;height:28px; line-height:28px;min-width:1000px;width:100%;p osition:fixed; " >
<div style= "Margin:auto" >
<span style= "Font-size:20px;color: #848484" ></span>
</div>
</div>
</div>

2. three major issues

1) container-fluid block background setting

Background-size:cover make the picture fully covered in the IE8 display effect is different

<div class= "Container-fluid" style= "Background:url (image/ac_comp_pro/backgroud.png) No-repeat Center Center fixed ;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
">

so that the background map can always be covered by the browser Bayi for container-fluid above the height of the element and; only head here.

<script>
$ (document). Ready (function () {
$ (". Container-fluid"). Height ($ (window). Height ()-81);
})
$ (window). Resize (function () {
$ (". Container-fluid"). Height ($ (window). Height ()-81);
})
</script>

2) div up or down center

    parent Div must have position properties

    sub div style position : absolute top : 50% left : 50% margin-top margin-left

<div style= "position:relative;" >
<div style= "Position:absolute;top:50%;left:50%;height:100px;margin-top: -50px;width:200px;margin-left:-100px; ">
</div>
</div>

3) According to the content settings min-height,min-width so that the style will not be squeezed deformation

<div class= "Container-fluid" style= "Background:url (/caunion/image/backgroud.jpg) No-repeat Center Center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
min-height:480px;
min-width:1000px; ">

3, for reference CSS

body{
font-family:arial;
font-size:25px;
Text-align:center;
width:100%;
height:100%;
}

#all {
width:100%;
height:100%;
}

. head{
height:81px;
width:100%;
min-width:1000px;
position:relative;
}

. container-fluid{

Background:url (/caunion/image/backgroud.jpg) No-repeat Center Center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Background-size:cover;
min-height:480px;
min-width:1000px;

}

#content {
Position:absolute;
top:50%;
left:50%;
height:400px;
width:720px;
Margin-left: -360px;
Margin-top: -200px;
}
. under{

height:29px;
bottom:0px;
width:100%;
min-width:1000px;
position:fixed;
Margin:auto Auto;
}

4.if There are multiple parts in the content, you need to add a percent interval

Place content in container-fluid, set a percentage height, and then place the contents in.

. Row for interval effect

<div class= "Container-fluid" >

<div class= "Row" ></div>

<div class= "Tabcontent" ></div>

<div class= "Login" ></div>

<div class= "Tabtitle" ></div>

<!--tab ENDS-
</div>

. row{

height:10%;

}

. tabtitle{
height:36%;
width:1000px;
Margin:auto;
position:relative;
}

. login{
height:8%;
position:relative;
}

. tabcontent{
height:36%;
position:relative;
}

Front-end CSS vertical centering and adaptive problems