css style horizontal and vertical centering method

Horizontal center (comprising the block center)

1. The fixed width, left and right margin to auto. (Conventional block flow cartridge, the elastic project [not fixed width])

Examples: box1 provided on the box width, then set the margin: auto;

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        margin: auto;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

The resulting effect:

2. The flexible pouch set justify-content: center, let elasticity project centered on the spindle. (Universal adaptation)

Examples: elastic box, and the alignment of the parent element;

<style>
    .box-all {
        display: flex;
        justify-content: center;
    }
    
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

The resulting effect:

3. parent element arranged text-align: center, let row inside the cartridge, the cartridge centering block (text).

Examples: Set on the box text-align: center; automatically centered text;

< Style > 
    P { 
        text-align = left : Center ; 
    } 
</ style > 

< body > 
    < div class = "Box-All" > 
        < P > This is a paragraph of text. </ P > 
    </ div > 
</ body >

The resulting effect:

4. The relative positioning of the elements, margin-left: 50%; transform: translateX (-50%). [Margin, padding with respect to the width of a block containing a percentage] [Ultimate Solution]

Examples: property relative positioning of the cassette is provided, positioned in a manner as above;

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        position: relative;
        margin-left: 50%;
        transform: translateX(-50%);
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

The resulting effect:

Vertically centered (method similar to the above, I do not demonstrated)

1 line text centered vertically disposed line-height of the parent element comprising a block height.

2. The flexible pouch disposed align-items: center, so that the elastic side project centered on the axis.

3. The relative positioning of the elements, top: 50%; transform: translateY (-50%). [Ultimate] program

css style horizontal and vertical centering method

Guess you like