Height uncertainty how to dispose center

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