6 ways to achieve vertical horizontal centering using CSS

Objective

Because of the localization of HTML language, it is not as simple in the web as in Word, especially when the content style is changeable, the content is wide and variable, to achieve a reasonable center is quite a test of engineer experience. Online talk about the center of the article a lot, but are not too complete, so the small eggplant today to summarize the implementation of pure CSS in the center of the various programs. Learn to be shallow, if there are inappropriate in the text, million hope points out!

6 different options

1. Absolute positioning +margin:auto

<style type= "Text/css" >    . WRP {        background-color: #b9b9b9;        width:240px;        height:160px;    }    . box {        color:white;        Background-color: #3e8e41;        width:200px;        height:120px;        Overflow:auto;    }    . WRP1 {position:relative;}    . box1 {        margin:auto;        Position:absolute;        left:0; right:0; top:0; bottom:0;    } </style><div class= "WRP wrp1" >    <div class= "box box1" >        
Effect:


The principle of implementation: the use of CSS positioning rules, set the left and right, up and down the direction of 0,margin for auto, let CSS based on the location of the calculation margin value, with the hack way to achieve the center. Ruler of Center block (green)

Inch needs to be controllable, because CSS calculates margin also need reference dimension value, because four weeks is 0, so automatically calculate the size is the same as the parent container. Whether you set the width, height, or max-

Height, max-width, are not extended to the same size as the parent.

2, absolute positioning +margin reverse Offset

<style type= "Text/css" >.wrp2 {position:relative;}. Box2 {    position:absolute;    top:50%; left:50%;    Margin-left: -100px; /* (width + padding)/2 */    margin-top: -75px;/* (height + padding)/2 */}</style><div class= "WRP wrp2" >< div class= "box box2" >    
Effect:


Implementation principle: Because top, left offset the parent object's 50% height width, so you need to use margin Reverse offset Center block 50% width height. The percentages are not used in margin because the percentages are for

The specified margin value for the parent object, so you need to calculate the fixed value manually. This scheme requires a fixed size value to calculate the margin inverse bias value, so scenario 2 is slightly worse than scenario 1!

3, absolute positioning +transform reverse Offset

<style type= "Text/css" >.WRP3 {position:relative;}. box3 {    margin:auto;    Position:absolute;    top:50%; left:50%;    -webkit-transform:translate ( -50%, -50%);    -ms-transform:translate ( -50%, -50%);    Transform:translate (-50%,-50%);} </style><div class= "WRP wrp3" ><div class= "box Box3" >    
Effect:


Principle of implementation: Scenario 3 is the same as Scenario 2! The difference is that the transform is used instead of the margin to do the reverse offset, because the transform calculation datum is the element itself, so here can use 50% to do the reverse offset. This scheme also requires a fixed size value, and the browser calculates the positioning as a benchmark!

4, Display:tabel

<style type= "Text/css" >.WRP4 {display:table;}. SUBWRP4 {    Display:table-cell;    Vertical-align:middle;}. box4 {    margin:auto;    Overflow-wrap:break-word;    Height:auto;    max-height:80%;    max-width:80%;} </style><div class= "WRP wrp4" ><div class= "SUBWRP4" >    <div class= "box box4" >        

Effect:


Implementation principle: Scheme 4 is the implementation of the effect is better, the size of the center block can do the package, the disadvantage is to add a layer of Table-cell layer to achieve vertical center. The center block of scenario 4 can be set max-

Height, max-width, and center blocks can be wrapped in a vertical direction. Horizontal direction because it is inside the Table-cell, so will directly show Max-width, that is, the width of the larger.

5, Display:inline-block

<style type= "Text/css" >.WRP5 {    text-align:center;    Overflow:auto;}. box5 {    display:inline-block;    Vertical-align:middle;    Width:auto;    Height:auto;    max-width:90%;    max-height:90%;}. Wrp5:after {    content: ';    Display:inline-block;    Vertical-align:middle;    height:100%;    Margin-left: -0.25em;    /* to offset spacing. May vary by font */}</style><div class= "WRP wrp5" ><div class= "box box5" >    
Effect:


Implementation principle: The principle: Use Inline-block's vertical-align:middle to align the after pseudo-element, the height of the after pseudo-element is the same as the parent object, and the alignment of the height direction is achieved. Scheme 5 achieves better results, the size of the center block can be wrapped, adaptive content, compatibility is also very good. The disadvantage is that horizontal centering needs to be considered in the Inline-block interval (the code line break left the problem.) ）。 The center block of scenario 4 can be set Max-height, Max-width, and the center block is adaptive with horizontal vertical two directions.

6, Display:flex-box

<style type= "Text/css" >.WRP6 {    display:-webkit-flex;    Display:-moz-box;    Display:-ms-flexbox;    Display:-webkit-box;    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;}. box6 {    width:auto;    Height:auto;    max-width:90%;    max-height:90%;} </style><div class= "WRP wrp6" ><div class= "box box6" >    
Effect:


Implementation principle: Flexbox layout. This is the layout of the ultimate Dafa, a variety of layout positioning problems! Advantages: can solve various arrangement layout problems, the realization way accord with human cognition. Cons: Some old browser support is not high on the PC side.