A brief overview of 4 ways to achieve horizontal centering using CSS

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 about the horizontal center of the 4 kinds of ideas, interested friends refer to it

Previous 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 about the horizontal center of the 4 kinds of ideas, interested friends refer to it!

Idea one: Set text-align:center in the parent element to implement inline elements in the horizontal center

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;}       . Child{display:inline-block;}   </style>    <p class= "parent" style= "Background-color:gray;" >     <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>   </p>

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>    <p class= "parent" style= "Background-color:gray;" >     <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>   </p>

"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;    rightright:0;    margin:0 Auto;    width:50px;   }   </style>    <p class= "parent" style= "background-color:gray;height:20px;" >       <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>      </p>

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>    <p class= "parent" style= "background-color:gray;height:20px;" >     <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>   </p>

"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 <p> 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>    <p class= "parent" style= "background-color:gray;height:20px;" >     <p class= "Childwrap" >       <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>      </p>      </p>

"3" with negative margin

The margin percentage is relative to the containing block, so you need to add a layer of <p> 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>    <p class= "parent" style= "background-color:gray;height:20px;" >     <p class= "Childwrap" >       <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>      </p>      </p>

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>    <p class= "parent" style= "Background-color:gray;" >       <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>      </p>

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

<style>   . Parent{display:flex;}   . child{margin:0 Auto;}   </style>    <p class= "parent" style= "Background-color:gray;" >       <p class= "Child" style= "Background-color:lightblue;" >DEMO</p>      </p>