4 ways to achieve horizontal centering of CSS

xCatalog [1]text-align [2]margin [3]absolute] [4]flex front words

Horizontal centering is a frequently encountered problem. It seems that there are many ways, all roads lead to Rome . but the system combing, in fact, all around a few ideas unfold. This article will introduce 4 ways of thinking about horizontal centering

idea One: Set text-align:center in the parent elementRealizeInline elements are centered horizontally

Set the display of the child element to inline-block so that the child elements become inline elements

[note] to be compatible with ie7-browser, you can use display:inline;zoom:1 to achieve inline-block effect .

 <style>.parent  {text-align  :  center ;}  {display :  Inline-block ;} </STYLE>  

<class= "parent"  style= "Background-color:gray;" >  <  class= "Child"  style= "background-color:lightblue;" > DEMO</div></div>

Idea two: Set margin:0 auto in its own element to implement block-level element horizontal centering

"1" will display the child element as a table, making the child element a block-level element, while the table is also wrapped, the width is open by the content

[note] to be compatible with ie7-browser, you can change the structure of child to <table class= "child" >DEMO</table>

<style>.child {    display: table;     margin: 0 auto;} </style>

<class= "parent"  style= "Background-color:gray;" >  <  class= "Child"  style= "background-color:lightblue;" > DEMO</div></div>

"2" If the child element is fixed width, you can use the absolute positioning of the box model properties to achieve the center effect; If the width is not set, the child elements are stretched

<style>. Parent{position:relative;}. Child{position:Absolute; Left:0; Right:0;margin:0 Auto;width:50px;}</style>

<class= "parent"  style= "background-color:gray;height:20px;" >    <  class= "Child"  style= "background-color:lightblue;" > DEMO</div>   </div>

Idea three: horizontal centering via the offset property of absolute positioning

"1" with translate () displacement function

The percentage of the translate function is relative to its own width, so the left:50% mate Translatex (-50%) achieves a center effect

Note ie9-Browser does not support

<style>.parent {  position: relative;} . Child {  position: absolute;   Left: 50%;   transform:TranslateX ( -50%);} </style>

<class= "parent"  style= "background-color:gray;height:20px;" >  <  class= "Child"  style= "background-color:lightblue;" > DEMO</div></div>

"2" mating relative

The offset property of the relative is relative to itself, because the child element is already set to absolute, so if you use relative, you need to add a layer <div> structure so that its width is the same as the child element width

[Note] This method is fully compatible, but adds HTML structure

<style>.parent {  position: relative;} . Childwrap {  position: absolute;   Left: 50%;} . Child {  position: relative;   Left: -50%;} </style>

<Divclass= "Parent"style= "background-color:gray;height:20px;">  <Divclass= "Childwrap">    <Divclass= "Child"style= "Background-color:lightblue;">DEMO</Div>   </Div>   </Div>

"3" with negative margin

The margin percentage is relative to the containing block, so you need to add a layer of <div> structure. Because the default value for width widths is auto, when you set a negative margin, the width also increases as it becomes larger. So we need a fixed width at this point.

[Note] Although fully compatible, it is necessary to increase the page structure and fixed width processing, so the application scenario is limited

<style>. Parent{position:relative;}. Childwrap{position:Absolute; Left:50%;}. Child{width:50px;Margin-left:-50%;}</style>

<Divclass= "Parent"style= "background-color:gray;height:20px;">  <Divclass= "Childwrap">    <Divclass= "Child"style= "Background-color:lightblue;">DEMO</Div>   </Div>   </Div>

Idea four: Horizontal centering with Flex box model

Note ie9-Browser does not support

"1" Sets the spindle alignment on the telescopic container Jusify-content:center

<style>.parent {  display: flex;   justify-content: center;} </style>

<class= "parent"  style= "Background-color:gray;" >    <  class= "Child"  style= "background-color:lightblue;" > DEMO</div>   </div>

"2" Set margin:0 Auto on the scaling project

<style>. Parent{Display:Flex;}. Child{margin:0 Auto;}</style>

<class= "parent"  style= "Background-color:gray;" >    <  class= "Child"  style= "background-color:lightblue;" > DEMO</div>   </div>

4 ways to achieve horizontal centering of CSS