5 kinds of ideas about CSS to achieve horizontal and vertical centering

The following small series for everyone to bring an analysis of the CSS to achieve horizontal vertical and center 5 kinds of ideas. Small series feel very good, now share to everyone, also give us a reference, follow the small series come and see it

Horizontal center and vertical centering have been introduced separately, this article will introduce 5 kinds of ideas of horizontal vertical center simultaneously

idea One: text-align + line-height to achieve horizontal vertical center of single line text

<style>   . test{       Text-align:center;       line-height:100px;   }   </style>

xml/html Code copy content to clipboard

1. < P class="Test" style="background-color:lightblue;width:200px;" > Test text </p>

idea Two: text-align + vertical-align

"1" sets Text-align and vertical-align in the parent element and sets the parent element to the Table-cell element, and the child element is set to the Inline-block element

[note] If the Ie7-browser is compatible, the structure will be changed to <table> structure to achieve the Table-cell effect; display:inline;zoom:1 to achieve inline-block effect

<style>   . parent{       Display:table-cell;       Text-align:center;       Vertical-align:middle;   }   . child{       display:inline-block;   }   </style>

<p class= "Parent" style= "Background-color:gray; width:200px; height:100px; " >  <p class= "Child" style= "Background-color:lightblue;" > Test Text </p></p>

"2" If the child element is an image, instead of using Table-cell, the parent element uses the row height instead of the height, and the font size is set to 0. The child element itself is set Vertical-align:middle

<style>   . parent{       Text-align:center;       line-height:100px;       font-size:0;   }   . child{       vertical-align:middle;   }   </style>

<p class= "Parent" style= "Background-color:gray; width:200px; ">  </p>

idea Three: margin + vertical-align

To set the vertical-align in the parent element, set it to the Table-cell element, and set it to the table element if you want the content of the block element to be horizontally centered by margin:0 Auto to open the width. The table element can be nested inside the Tabel-cell element, like a cell where a table can be nested

[note] If the Ie7-browser is compatible, the structure should be changed to <table> structure

<style>   . parent{       Display:table-cell;       Vertical-align:middle;   }   . child{       display:table;       margin:0 auto;   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

idea four: using absolute

The "1" uses the box model property of the absolutely positioned element, and sets the Margin:auto based on the offset attribute as the determined value.

<style>   . parent{       position:relative;   }   . child{       Position:absolute;       top:0;       left:0;       rightright:0;       bottombottom:0;       height:50px;       width:80px;       Margin:auto;   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

2 uses the Offset property of an absolutely positioned element and the translate () function's own offset to achieve a horizontal vertical center effect

Note ie9-Browser does not support

<style>   . parent{       position:relative;   }   . child{       Position:absolute;       top:50%;       left:50%;       Transform:translate ( -50%,-50%);   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

"3" can be used to achieve horizontal vertical center effect with margin negative value when child element height is known

<style>   . parent{       position:relative;   }   . child{       Position:absolute;       top:50%;       left:50%;       width:80px;       height:60px;       Margin-left: -40px;       Margin-top: -30px;   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

idea Five: using Flex

Note ie9-Browser does not support

"1" Use Margin:auto on telescopic projects

<style>   . parent{       Display:flex;   }   . child{       margin:auto;   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

"2" Use spindle alignment justify-content and side axis alignment on telescopic container Align-items

<style>   . parent{       Display:flex;       Justify-content:center;       Align-items:center;   }   </style>

<p class= "Parent" style= "Background-color:lightgray; width:200px; height:100px; ">  <p class=" Child "style=" Background-color:lightblue; " > Test Text </p></p>

The above analysis of the CSS to achieve horizontal vertical at the same time the center of the 5 ideas is small to share all the content of everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.