One, the width height determines how to center in a div
This is very common, but there are many ways to do this, so let's start with the HTML code
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; }. box1{width:200px; height:200px; Background-color:red; margin:50px Auto; }. box2{width:100px; height:100px; Background-Color:green; } </style>class="Box1"> <divclass="Box2"></div> </div></body>The style
There are a number of ways to have the green div horizontally vertically centered in the Red Div, listed below
. box1{ width:200px; height:200px; Background-color:red; margin:50px Auto; position:relative; } . box2{ width:100px; height:100px; Background-color:green; Position:absolute; Top:%; Left:%; Margin-top:-50px; Margin-left:-50px; }
Method One: The parent box can be positioned relative to the absolute position, the sub-element is absolutely positioned position:absolute;top:50%;left:50%; the horizontal and vertical offsets are half the width and height. This is the most common way.
Method Two: Let the parent box relative positioning can also absolute positioning, sub-element absolute positioning position:absolute;top:50%;left:50%, with CSS3 style transform:translate ( -50%,-50%).
The width determines how highly uncertain how to center horizontally vertically in a div
First on the HTML code
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; }. box1{width:200px; height:200px; Background-color:red; margin:50px Auto; position:relative; }. text{width:100px; } </style>class="Box1"> <pclass="text"> I've sent me my room, my cell, I can't look at it, I can't see it. I'm crazy for me, not my payment </p> </div></body>Method One:
. text{
width:100px;
Position:absolute;
top:50%;
left:50%;
Transform:translate ( -50%,-50%);
}
A style transform method using CSS3
Method Two:
. box1{
width:200px;
height:200px;
background-color:red;
margin:50px Auto;
line-height:200px;
Text-align:center;
}
. text{
width:100px;
Line-height:1;
Display:inline-block;
Vertical-align:middle;
}
The parent box row height is set to 200px, the child element is converted into an inline element and then added vertical-align:middle; this is to let him vertically center, for the horizontal center we use the parent box to add text-align:center; ok.
Method Three:
. box1{
width:200px;
height:200px;
background-color:red;
margin:50px Auto;
Display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
}
. text{
width:100px;
Line-height:1;
}
Use the Box-align and Box-pack properties to center the child elements of the div box:
There is currently no browser support for the Box-pack property.
Firefox supports an alternative-moz-box-pack property.
Safari, Opera, and Chrome support alternative-webkit-box-pack properties.
So use need to be cautious!!!
Width height is not sure how to center horizontally vertically in a div
This is the same as the width of the height uncertainty method, but there is another way
Convert to Table
. box1{
width:200px;
height:200px;
background-color:red;
margin:50px Auto;
display:table;
}
. text{
width:100px;
Line-height:1;
Display:table-cell;
Vertical-align:middle;
}
Then the child element Display:table-cell;
Vertical-align:middle;
On the OK, summed up so much, please the great God a lot of criticism, thank you!!!
Height uncertainty how to dispose center