CSS page layout method [vertical center]

I. Problems with vertical center attributes

Vertical-align is defined vertically in CSS, but can only be used as inline elements.

Ii. Problems with defining vertical center Using Boundary Properties

Using margin: auto 0; the content in the fast element cannot be vertically centered. (Invalid)

3. Vertical center with fixed container and content sizes

1. Define the vertical center of the parent element's padding attribute

. Div1 {

Margin: 50px 0 0;

Width: 500px;
Height: 150px;
Background: #666666;
Border: 4px solid #000000;
}

. Div2 {
Width: 200px;
Height: 100px;
Background: #999999;
Border: 1px solid #000000;
}

<Div class-"div1">
<Div class = "div2"> here is the content to be centered </div>
</Div>

2. Define the vertical center of the boundary attribute of the child element

. Div1 {
Width: 500px;
Height: 200px;
Background: #666666;
Border: 4px solid #000000;
}

. Div2 {
Margin: 50px 0 0;
Width: 200px;
Height: 100px;
Background: #999999;
Border: 1px solid #000000;
}

<Div class-"div1">
<Div class = "div2"> here is the content to be centered </div>
</Div>

3. Use the positioning attribute of the child element to define vertical center

. Div1 {
Width: 500px;
Height: 200px;
Background: #666666;
Border: 4px solid #000000;
}

. Div2 {
Position: Relative;

Top: 50px;

Width: 200px;
Height: 100px;
Background: #999999;
Border: 1px solid #000000;
}

<Div class-"div1">
<Div class = "div2"> here is the content to be centered </div>
</Div>

4. Vertical center with fixed content size

. Div1 {
Width: 500px;
Height: 200px;
Background: #666666;
Border: 4px solid #000000;
}

. Div2 {
Position: relative;

Top: 50%;

Margin-top:-50px;

Width: 200px;
Height: 100px;
Background: #999999;

Border: 1px solid #000000;

}

<Div class-"div1">
<Div class = "div2"> here is the content to be centered </div>
</Div>

5. Vertical center with fixed container size

.div{
float:left;
width:250px;
height:200px;
background:#666666;
border:4px solid #000000;
}
.div1{
line-height:200px;
font-size:179pxl
}
.img{
height:100px;
vertical-align:middle;
}
<div class-"div1">

</div>
<div></div>

6. Vertical center with unfixed content and container sizes

. Father {
Position: relative;
Width: 500px;
Height: 200px;
Border: 4px solid #000000;
}

. In {
Position: absolute;
Top: 50%;
}

. Son {
Position: relative;
Top:-50%;
Width: 200px;
Height: 100px;
Background: #999999;
Border: 2px solid #000000;
}

<Div class = "father">
<Div class = "in">
<Div class = "son"> content display </div>
</Div>