Home > Developer > Web Develop
It is very simple to center elements horizontally in CSS, but it is not a simple matter to center the elements vertically, and for many years vertical centering has become the holy grail of CSS because it is a very common requirement, but it is not a simple thing in practice. below I will briefly describe horizontal centering, and focus on vertical centering.
First part: Horizontal centering1. Implement the center of the inline element. Method: Add the style of the block element outside the element in the row: Text-align:center;<! DOCTYPE html>"en">" UTF-8"> <title>Document</title> <style> div{text- Align:center;} Img{width:200px;height:200px;border:thin solid red;} </style>"pic.png" > </div></body>Note: For the center of a block element, you cannot set text-align:center in the style of its parent element, which is not valid. The following describes how the block elements are centered.
2. Implement horizontal centering of block-level elements. Method One: Set its left and right side of the external patch to auto.<! DOCTYPE html>"en">" UTF-8"> <title>Document</title> <style> div{width:200px; Height:100px;background:red;margin:0 Auto;} </style> This is a div</div></body >Note: If the block-level element is a direct child of the body, does not set the width, the default is 100%, the effect is not visible, the height is not set, and there is no content in the Div, the high default is 0. Therefore, be sure to set the block-level element width and height at the same time, so as to see the effect. You can also use this method for another div in one div to be centered, because the margin is relative to its parent element.
Method Two: Use absolute positioning and negative margins.The code looks like this:
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0auto;position:relative;} #son {width:100px;height:100px;background: #aaa; text-Align:center; Position:absolute; Left: -%; Margin-left:-50px; /*Note: Because absolute positioning is left, the value is relative to the leftmost 50% of son, so you need to use Margin-left to offset half of the width to the left*/ } </style>"Parent"> <div id="son">faas</div> </div> </body>As follows:
Part Two: vertical centering1. Vertical centering of inline elementsa when we write the navigation menu, we tend to write <a> tags into the <li> of float, and for the sake of aesthetics, we often need to center the contents of the a tag horizontally and vertically. Horizontal centering we have described above, which is done by setting text-align:center within the parent element of the font. What about vertical centering? For text, we only need to set the row height to the level of the block element where the font is located.
The HTML code is as follows:
<body> <ul> <li><a href=""> Me </a></li> <li><a href="> Yes </a></li> <li><a href=""> Guide </a></li> <li><a href=""> Navigation </a></li> <li><a href="> </a> </li> </ul> </body>The CSS code is as follows:
<style> 00; list-style:none;text-decoration:none;} UL li{float: left; /* width:40px;height:40px; */ } a{display:block;width:70px;height:40px;background: #daa541; border:1px solid Red;text-align: center;line-height:40px;} </style>I changed the Display property value of the a tag to block, so we can change the width and height of the a tag, because Li is a, and Li will be stretched by the content (i.e. a tag), so the width and height in Li are not required.
Because a becomes a block-level element, the horizontal center only needs to add text-decoration:none to A; By setting the height of the line-height and height to the same, you can achieve vertical centering .
B There's actually a much simpler way to center the font in the A label.
After setting a bit block for the display property of a, do not set its width and height (Li's width and height is not set), in order to see clearly, we can give a plus border, then get the following:
That is, the size of a is completely open by the font, then we can set the upper and lower left and right padding value to achieve the same effect as a method. The HTML code is the same as in a and the CSS code is as follows:
0 0; list-style:none;text-decoration:none;} UL li{float: left;} A{display:block;background: #daa541; border:1px solid red; padding:10px 30px;}As you can see, here I only set the upper and lower padding value to 10px, the left and right padding value is 30px, the width height in a is text-align (horizontally centered) Line-height (the vertical center is implemented) These properties are all not set and are used only with padding:10px 30px, so this method is recommendable.
As follows:
C Another method can also be used to achieve vertical centering of elements in the row.
The code is as follows:
<! DOCTYPE html>"en">" UTF-8"> <title>Document</title> <style> *{margin:0 0 ;} #parent {width:500px;height:300px;background: #ccc; Display:table-cell; vertical-Align:middle;} </style>"parent"> < span>faas</span> </div> </body>That is, we set the Display property value of the DIV element with the ID parent as the bit Table-cell, which allows the label element to be rendered as a table cell, similar to the TD label. At this point, you can set the vertical-align to achieve vertical centering. However, it is worth noting that Table-cell will be destroyed by some other CSS properties, such as float and position:absolute, and so on. And once the bit Table-cell is set, the margin cannot be used . This method can also be used for vertical centering of block-level elements.
2. Vertical centering of block-level elements.Method One: Use absolute positioning and negative margins.
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0auto;position:relative;} #son {width:100px;height:100px;background: #aaa; text-Align:center; Position:absolute;top: -%;margin-top:-50px; } </style>"Parent"> <div id="son">faas</div> </div> </body>
Method Two: Use the Display:table-cell method.
<! DOCTYPE html>"en">" UTF-8"> <title>Document</title> <style> *{margin:0 0 ;} #parent {width:500px;height:300px;background: #ccc; Display:table-cell; vertical-Align:middle;} </style>"parent"> < div>faas</div> </div> </body>As you can see, this method is no different from the vertical centering of the elements in the row.
Method Three: Use Display:flex; code as follows:
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0Auto; Display:flex; Align-Items:center;} #parent>div{background:red;width:100px;height:100px;} </style>"Parent"> <div>faas</div> </div> </body>
Adds a display:flex;align-items:center to the parent element, which can be centered vertically.
Part III: Horizontal vertical and center (emphasis)method One: Use absolute positioning and negative marginsThe code is as follows
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0auto;position:relative;} #son {width:100px;height:100px;background: #aaa; text-Align:center; Position:absolute;top: -%;margin-top: -50px; Left -%;margin-left:-50px; } </style>"Parent"> <div id="son">faas</div> </div> </body>The effect is as follows:
Method Two: Use Display:flexThe code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0Auto; Display:flex; Align-items:center; justify-Content:center;} #parent>div{background:red;width:100px;height:100px;} </style>"Parent"> <div>faas</div> </div> </body>That is, you only need to add display:flex;align-items:center in the style of the parent element to center vertically, justify-content:center, and center horizontally.
Method Three: also use Display:flex.
The code is as follows:
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style> *{margin:0;p adding:0;} #parent {width:500px;height:300px;background: #ccc; margin:0Auto; Display:flex; } #parent>div{background:red;width:100px;height:100px; margin:auto;} </style>"Parent"> <div>faas</div> </div> </body>We find that we only need to set Display:flex in the parent element, and set margin:auto in the child element.
Method Four: Use the CSS3 propertyIn method One, we must know that the width and height of the child elements are used to center the negative margins, but this method is not available if its width and height are not a definite value. The following method of using CSS Morph properties can solve this problem very well because the percentage value used in the translate () transformation function is converted and moved as a benchmark for the width and height of the element itself. Examples are as follows:
<! DOCTYPE html>"en">"UTF-8"> <title> Center Method </title> <style>#father {position:relative; width:500px; height:500px; Background: #ccc; } #son {Position:absolute; Top: -%; Left: -%; width:100px; Background: #ddd; Transform:translate (- -%,- -%); } </style>"Father"> <div id="son"> child element, no height set. child element, no height is set. child element, no height is set. child element, no child element, no height set. </div> </div></body>I only set the width in the code, not the height, which is highly adaptive, the final effect is as follows:
Even if we add or decrease content, we can achieve vertical centering!
Note: Original article, if you want to reprint, please indicate the source. Blog Address: http://www.cnblogs.com/zhuzhenwei918/p/6158433.html
do my ambition also can not be to the person, may have no regrets, its what can ridiculed?CSS Center that thing.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
