Multiple solutions for horizontal and vertical center of css

Vertical-align is a good attribute, but this attribute is initially for the cell of the table. Of course, although this attribute does not work for block-level elements, it still works for row elements such as span (at this time, when this attribute is set to a negative value, the content of the element is moved down, while the positive value is moved up ).

The following is a professional vertical center centralized solution. This is recorded for reference.

1. Center a single row vertically

The vertical-align attribute cannot be vertically centered in the layer. Here we have a clever method: set the height to the same as the line-height!

Example source code [www.111cn.net]
<Div style = "line-height: 500px; height: 500;">
2. Layer horizontal center

Set the div width to be smaller than the width of the parent div, and set margin: 0 auto; to center the div.

Example source code [www.111cn.net]
# Parentdiv
{
Width: 500px;
}
# Childdiv {
Width: 200px;
Margin: 0 auto;
}
3. The text in the layer is horizontally centered

Add text-align: center to the css of childdiv;

Example source code [www.111cn.net]
# Parentdiv
{
Width: 500px;
}
# Childdiv {
Width: 200px;
Margin: 0 auto;
Text-align: center;
}
4. Vertical center of the div layer

Example source code [www.111cn.net]
<Div style = "width: 275px; height: 375px; border: solid red;">
<Div style = "background: green; height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<Div
Style = "background: red; position: static; position: absolute9; top: 50%;">
<Div
Style = "background: blue; position: relative; top:-50%;">
Www.111cn.net
</Div>
</Div>
</Div>
</Div>
5. Vertical and horizontal center of div layer, long line feed

Example source code [www.111cn.net]
<Div style = "float: left; width: 275px; height: 375px; border: solid red;">
<Div
Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<Div
Style = "position: static; position: absolute9; top: 50%;">
<Div style = "position: relative; top:-50%; text-align: center;">
<Div style = "width: 85px; word-wrap: break-word; table-layout: fixed; word-break: break-all; margin: 0 auto;">
Bytes
</Div>
                    
</Div>
</Div>
</Div>
</Div>
6. div vertical scrolling

Example source code [www.111cn.net]
<Div
Style = "width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

Www.111cn.net
</Div>
7. Vertical and text-align horizontal center

Example source code [www.111cn.net]
<Div style = "float: left; width: 275px; height: 375px; border: solid red;">
<Div
Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<Div
Style = "position: static; position: absolute9; top: 50%;">
<Div
Style = "position: relative; top:-50%; text-align: center;">
<Div style = "width: 275px;">
<Div style = "width: 160px; word-wrap: break-word; table-layout: fixed; word-break: break-all; text-align: left;">
Bytes
</Div>
</Div>
                    
</Div>
</Div>
</Div>
</Div>
8. Vertical and margin horizontal center

Example source code [www.111cn.net]
<Div style = "float: left; width: 275px; height: 375px; border: solid red;">
<Div
Style = "height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<Div
Style = "position: static; position: absolute9; top: 50%;">
<Div
Style = "position: relative; top:-50%;">
           
<Div style = "margin: 0 auto; width: 160px; word-wrap: break-word; table-layout: fixed; word-break: break-all;">
Bytes
</Div>
            
                    
</Div>
</Div>
</Div>
</Div>