A brief overview of 4 ideas for using CSS to achieve horizontal centering

Horizontal centering is a frequently encountered problem. It seems that there are many ways, and all roads lead to Rome. But after a systematic review, it actually revolves around several ideas. This article will introduce 4 ideas about horizontal centering. Friends who are interested can refer to it

Previous words

Horizontal centering is often encountered The problem. It seems that there are many ways, and all roads lead to Rome. But after a systematic review, it actually revolves around several ideas. This article will introduce 4 ideas about horizontal centering. Friends who are interested can refer to it!

Idea 1: Set text-align:center in the parent element to achieve horizontal centering of inline elements

The display of the element is set 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; Achieve the effect of inline-block

<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 2: Set it in its own element margin: 0 auto implements horizontal centering of block-level elements

[1]Display the sub-element as a table, making the sub-element a block-level element. At the same time, the table is also wrapped, and the width is expanded by the content

[Note] If you want to be compatible with IE7-browser, you can change the structure of the child to 818fbd9ed5d2bf0044e6cee6956524cdDEMOa38699d0455624495b612811a052d700 structure needs to be added. Since the default value of width is auto, when negative margin is set, width will also increase. Therefore, fixed-width processing is required at this time
　[Note] Although it is fully compatible, it requires additional page structure and fixed-width processing, so the application scenarios are 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 4: Use the flexible box model flex to achieve horizontal centering
[Note] IE9-browser does not support
[1] In scaling Set the main axis alignment on the 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 on the scalable project: 0 auto

<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>

The above is the detailed content of A brief overview of 4 ideas for using CSS to achieve horizontal centering. For more information, please follow other related articles on the PHP Chinese website!