Summary of element center in css, Summary of css element center

Summary of element center in css, Summary of css element center

In many cases, we need to center the elements: 1. horizontal center of a piece of text, 2. the horizontal center of an image. horizontal center of a block-level element; 4. vertical center of a single line of text, 5. text in an uncertain height is vertically centered, 6. determine the height of the block-level element vertical center and so on. Now I will summarize them separately (this article has also published a note in imooc, but it is not easy to understand it because of the layout .) :

1. align the elements horizontally using text-align: center;

<Div class = "text-center"> horizontal center </div>. text-center {width: 200px; height: 100px; text-align: center;/* align the text horizontally */color: # fff; background-color: # f54 ;}

2. align the image horizontally. The parent element uses text-align: center;

<Div class = "img-center">  </div>. img-center {width: 200px; height: 120px; text-align: center;/* center the image horizontally */background-color: # f54 ;}

Note:

The picture is an in-Row Element. From the very beginning, when I learned the video, a teacher seemed to have said that the picture was an inline-block element in the row. It sounds quite reasonable, because the image can use text-align: center; To horizontally center the image and Set width and height, no doubt for a long time! Later, I liked "tracing the source" to find out that this was not the case:

In ie, edge, chrome, firefox, and opera, the default img display mode is: display: inline;

Ie:

Edge:

Chrome:

Firefox:

Opera:

Img is inline, or is it easy to think about, like text, you can use text-align: center; set to horizontal center

3. Horizontally centered block-level elements, using margin-right: auto; margin-left: auto;

<Div class = "parent-box"> <div class = "child-box"> horizontal center of block-level elements </div>. parent-box {width: 250px; height: 150px; background-color: # f98 ;}. child-box {width: 200px; height: 100px; background-color: # f00; margin-left: auto; margin-right: auto ;}

4. Vertically center a single line of text so that line-height and height are equal.

<Div class = "text-middle"> center a single line of text vertically </div>. text-middle {width: 200px; height: 100px; line-height: 100px; background-color: # f00; color: # fff ;}

Note:

Here, the height and line-height are equal. There is a note:

When box-sizing: content-box; (this is also the default value ). Set the values of height and line-height to the same value. When box-sizing: border-box;, the value of line-height must be subtracted from the value of padding-top, padding-bottom, border-top, and border-bottom values,That is, it is equal to the valid height allocated to the content.

5. the height of a text segment is vertically centered. The height is not applicable here. Use padding-top :...; padding-bottom :...; the padding-top and padding-bottom values are the same.

<Div class = "text-middle-padding"> vertical center of text with uncertain height </div>. text-middle-padding {width: 150px; padding-top: 30px; padding-bottom: 30px; color: # fff; background-color: # f00 ;}

Note: For highly determined elements, how can we center the text vertically when the number of lines of the text is uncertain? It will be mentioned later.

6. determine the height of the block-level element vertical center, use position: absolute; top: 50%; margin-top :...; (the value of margin-top is half of the negative value of its own height );

<Div class = "parent-box"> <div class = "child-box"> vertical center of block-level elements with a fixed height </div>. parent-box {position: relative; width: 250px; height: 150px; background-color: # f00 ;}. child-box {position: absolute; top: 50%; width: 200px; height: 100px; margin-top:-50px; background-color: # f54 ;}

7. absolute positioning achieves horizontal and vertical center using position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<Div class = "parent-box"> <div class = "child-box"> absolute positioning achieves horizontal and vertical center </div>. parent-box {position: relative; width: 250px; height: 150px; background-color: # f00 ;}. child-box {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 100px; margin: auto; background-color: # f54 ;}

Note: We recommend this method for vertical center of block-level elements, which is my favorite method.

Note that the parent element should use position: relative; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; indispensable. If you only need to center vertically, right: 0; and left: 0; can be omitted without writing, margin: auto; can be changed to margin-top: auto; margin-bottom: auto ;; if you only need to center horizontally, top: 0; bottom: 0; can be omitted without writing, margin: auto; can be changed to margin-rihgt: auto; margin-left: auto ;.

8. horizontal vertical center for translation: use transform: translate (-50%,-50%); add vendor prefix-webkit-compatible with Safari and Chrome

<Div class = "parent-box"> <div class = "child-box"> horizontal vertical center of translation implementation </div>. parent-box {width: 200px; height: 200px; background-color: # f00 ;}. child-box {position: relative; top: 50%; left: 50%; width: 150px; height: 150px; background-color: # f54;-webkit-transform: translate (-50%,-50%); transform: translate (-50%,-50% );}

9. let the browser calculate the width and height of the child element and align it horizontally and vertically: By using the position: absolute; top :...; right :...; bottom :...; left :...; values in four directions are indispensable.

<Div class = "parent-box"> <div class = "child-box"> let the browser calculate the width and height of sub-elements and center them horizontally and vertically </div>/ div>. parent-box {position: relative; width: 200px; height: 200px; background-color: # f00 ;}. child-box {position: absolute; top: 20%; right: 20%; bottom: 20%; left: 20%; background-color: # f54 ;}

For sub-elements, the upper and lower left positioning values can use px as the unit, or % as the unit.

10. The css3 scaling layout enables horizontal and vertical center of elements by using display: flex; align-items: center; justify-content: center;

<Div class = "parent-box"> <div class = "child-box"> I am a child element, the auto scaling layout of css3 is used here </div>. parent-box {width: 400px; height: 150px; display: flex; justify-content: center;/* center sub-elements horizontally */align-items: center; /* center the child element vertically */border: 1px solid #999 ;}. child-box {background-color: # fe5454; color: # fff ;}

Note:

Support for ie 10 and later browsers, chrome, firefox, opera, and edge, and no vendor prefix is required.

In addition,"If the number of lines in the text is uncertain for a highly determined element, how can we center the text vertically?"Problem, use the css3 flexible layout method mentioned here. Use display: flex; justify-content: center; align-items: center; To deal with elements.

Note:

1. If justify-content: center is not added, child elements are not horizontally centered;

2. If you do not add align-items: center, the child element will overwrite the height of the parent element, rather than the height of the text that we only want!

Memory method:

We know that text-align: justify; Can layout the text in the form of both ends. This process is a matter of water. Lenovo memory, justify-content is also a matter of processing the horizontal direction, so justify-contnet: center; is to make the element horizontally centered.

Extension:

Requirement: When paging is performed frequently, we need to place the list items of pagination in the horizontal center, just like the dom below:

<ul class="pagination">    <li><a href="#">&laquo;</a></li>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">&raquo;</a></li></ul>      

Solution:

You can add text-align: center to the parent element ul, and add display: inline-block to the child element li;

Complete code:

<ul class="pagination">    <li><a href="#">&laquo;</a></li>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">&raquo;</a></li></ul>

Ul. pagination {margin-top: 20px; text-align: center; font-size: 0;/* set the font-size to 0, the purpose is to remove the margin of the child element whose display mode is inline-block (the margin is caused by html spaces) */} ul. pagination li {display: inline-block;} ul. pagination li a {display: inline-block; padding: 7px 14px; border-width: 1px 0 1px 1px; border-style: solid; border-color: # f1f2f3; font-size: 15px;/* The font-size must be set here. Do not expect to inherit it, because if it is not set, it will inherit the ul size 0 */transition: all. 3 s limit 0;} ul. pagination li: first-child a {border-top-left-radius: 5px; border-bottom-left-radius: 5px;} ul. pagination li: last-child a {border-right: 1px solid # f1f2f3; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} ul. pagination li a: hover {background-color: # fe5454; color: # fff; border-color: # fe5454 ;}