Element Auto Center Display

When we write a page, we often encounter the need to let an element automatically center the display, this element may be block-level elements, may be inline elements, may be text, and so on, and the center of the demand may be horizontal center, vertical center or both center.

As far as I know, there are four ways of centering: 1. Using table table properties; 2. Use the Table-cell property to render in table mode; 3. margin automatically centered; 4. Use absolute to center with margin negative values, as explained below:

1. Using table Tabular Features

This way the content can be centered vertically (valign= "middle") and horizontally centered (align= "center"), both inline and block-level elements can be vertically centered (Inline,inline-block,block), But horizontal centering only supports elements with inline attributes (Inline,inline-block), as shown below:

Example:

Css:

TD {
width:300px;
height:150px;
border:1px solid #d9d9d9;
}
TD P {
width:150px;
height:75px;
Background: #e5e5e5;
}

Html:

<table>
<tr>
<TD valign= "Middle" align= "center" >

<p></p>

</td>
</tr>
</table>

2. Use the Table-cell property to render in table mode

This way the element behaves like a TD or Th. This is illustrated below:

Example:

Css:

#table {
width:300px;
height:150px;
Display:table-cell;
Vertical-align:middle;
Text-align:center;
border:1px solid #d9d9d9;
}
#table p {
width:150px;
height:75px;
Display:inline-block;
Background: #e5e5e5;
}

Html:

<div id= "Table" >
<p></p>
</div>

3. Margin Auto Center

This method is calculated automatically, but only supports horizontal centering and does not support vertical centering, so margin:o Auto is usually set up, as shown below:

Example:

Css:

#mg {
width:535px;
height:185px;
border:1px solid #d9d9d9;
}
#mg p {
width:190px;
height:100px;
Background: #e6e6e6;
margin:0 Auto;
}

Html:

<div id= "mg" >
<p></p>
</div>

4. Use absolute with margin negative to center

This approach uses percentages and precise calculations to support horizontal centering and vertical centering. This needs to be explained, we talked about absolute positioning (about position positioning and z-index understanding), it is out of the flow of the document, so if you are centered on the browser, the parent element does not have to set another attribute, otherwise, the parent element will be relative or absolute. We want an element to be centered (in the case of horizontal centering, which is the same vertically), it needs to coincide with its midline (the gray dashed line) and the parent element's midline (the Blue dashed line), and when we let an element be absolutely positioned, and the left value is set to 50%, The leftmost side of this element is always aligned with the midline of the parent element (the blue dashed line), and what we have to do is let it move back to the left part on this basis, how much is this part? As you can see from the diagram, the median of the parent element (the blue dashed line) is aligned to the left of the Gray square, and the distance between the two midline is exactly half the width of the gray area. So we can use margin to take a negative character, so that Margin-left to the left of the gray area of the width of the half, you can center the display. Perpendicular. This is illustrated below:

Example:

Css:

     #pa  {
        width: 535px;
        height: 185px;
        border: 1px solid  #d9d9d9;
        position: relative;
    }
     #pa  p {
        width:  190px;
        height: 100px;
        background:  #e6e6e6;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -95px;
    }

Html:

<div id= "Pa" >
<p></p>
</div>

Element Auto Center Display