<center>label

Horizontally center the text it contains.

text-align:center

text-align:center, centers inline text horizontally in the parent container, or inline elements

vertical-align:middle

Vertically centered inline text, inline elements, with display:table, display:table-cell, work wonderfully.

line-height

Align text vertically at the same height as the height common setting.

margin:auto

<style>
    #ex2_container { width:200px; background-color:yellow; }
    #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container">
    <div id="ex2_content">Hello World</div>
</div>

hacks, hacks (tips)

There are many hacks, negative margin s, shadow elements:: before, etc.If your content is not fixed size, they are mostly fragile.

translate(-50%,-50%)

It's odd to use position plus translate translate(-50%,-50%) instead of the parent element as the baseline, the percentage calculation is based on itself.

<style>
    #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
    #ex3_content { 
        left:50%; top:50%; 
        transform:translate(-50%,-50%); 
        -webkit-transform:translate(-50%,-50%); 
        background-color:gray;
        color:white; 
        position:absolute;
    }
</style>
<div id="ex3_container">
    <div id="ex3_content">Hello World</div>
</div>

Absolute Centering

Parent container element: position: relative

.Absolute-Center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Note: Height must be defined and overflow: auto is recommended to prevent content overflow.

Center Viewport

Content element: position: fixed, z-index: 999, remember parent container element position: relative

.Absolute-Center .is-Fixed {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
}

Responsive

Percentage width height, maximum and minimum widths, plus padding

.Absolute-Center .is-Responsive {
    width: 60%;
    height: 60%;
    min-width: 400px;
    max-width: 500px;
    padding: 40px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

deviation

As long as margin: auto; in, the content block will be vertically centered, top, left, bottom, right can set the offset.

.Absolute-Center .is-Right {
    width: 50%;
    height: 50%;
    margin: auto;
    overflow: auto;
    position: absolute;
    top: 0; left: auto; bottom: 0; right: 20px;
    text-align: right;
}

overflow

Prevent overflow when centered content is higher than parent container, add overflow: auto (max-height: 100% without any padding).

.Absolute-Center .is-Overflow {
    width: 50%;
    height: 300px;
    max-height: 100%;
    margin: auto;
    overflow: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Adjust Size

The resize property allows for adjustable size.Set the min-/max-limit size and make sure that overflow: auto is added.

.Absolute-Center .is-Resizable {
    min-width: 20%;
    max-width: 80%;
    min-height: 20%;
    max-height: 80%;
    resize: both;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

image

Image also works, set height: auto;

.Absolute-Center .is-Image {
    width: 50%;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Variable Height

Height must be defined, but can be a percentage or max-height.If you don't want to define height, use display: table (Table-Cell compatibility needs to be considered).

.Absolute-Center .is-Variable {
    display: table;
    width: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.parent{display: table;  width: 1000px;}
.son{display: table-cell;}

This makes it easy to equalize the width of the parent element even if there are three or six elements.

2. Vertical centralization of block level subelements

Making a div or p vertically centered in a parent element has always been a problem that many people can't solve (note that using vertical-alignment directly on block-level elements doesn't solve this problem; vertical-alignment defines the vertical alignment of the baseline of an in-line element relative to the baseline of the row in which the element resides), as well as display:table:

.parent {display: table;}
.son {display: table-cell; vertical-align: middle;}

Set the display of block-level child elements to table-cell and use vertical-align.

Note: Although display:table solves the problem of avoiding tables, there are a few things to note:

• (1) display: padding will fail when table
• (2) margin and padding fail simultaneously when display: table-row
• (3) margin will fail when display: table-cell

Negative margin

Knowing exactly the width and height, a negative margin is half the width and height.

.is-Negative {
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -170px; /* (width + padding)/2 */
    margin-top: -120px; /* (height + padding)/2 */
}

Table-Cell

Structure:

<div class="Pos-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

Style:

.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
    display: table-cell;
    vertical-align: middle;
}
.is-Table .Center-Block {
    width: 50%;
    margin: 0 auto;
}

FlexBox

.Pos-Container.is-Flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
       -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
       -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}