Some methods to achieve about a horizontal vertically centered css:
.css positioning: with margin, padding, position
position: absolute; // absolute positioning, is generally employed relative to the parent element with the use, if the parent is not located, the body tag will be used as a parent level targeting
Margin position and with methods to achieve horizontal and vertical centering div two boxes:
html：
< Body > < div class = "parent" > < div class = "Children" > here is a sub-box </ div > </ div > </ body >
css:
<style>
.parent{
background-color:aquamarine;
width:300px;
height:300px;
position:relative;
}
.children{
background-color:yellow;
width:100px;
height:100px;
position:absolute;
top: 0%;
right: 0%;
bottom:0%;
left:0%;
margin:auto;
}
/* .children{
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
} */
</style>
effect:
.inline-height set to achieve high vertical center line, text-align: center to set the center level
.parent{ background-color:aquamarine; width:300px; height:300px; text-align: center; } .children{ display:inline-block; line-height:300px; }
line-height: inherit; // specified line-height values inherited from the parent element there
margin: inherit; // value margin requirements inherited from the parent element there
Recording on the z-index multilayer css
z-index: the attribute is valid position (non stastic), the value can be positive or negative, the greater the value, the closer the screen, which depends on the comparison shows a different level