CSS3 Flexbox Lightweight for horizontal and vertical centering of elements

CSS3 Flexbox easy to achieve horizontal and vertical centering of elements

There are many tutorials on the internet for Flex, and there are also some calls for Flexbox, some called flex, in fact, these two names are not wrong, just flexbox old point, and Flex is just out of the things, in order to facilitate the explanation, catch up with new technology, I'm going to call this layout a flex layout.

Element Center, I believe that as a front-end engineer You will always use, whether in the horizontal direction, or vertically centered, can be in your career wandering. But a lot of the time to achieve vertical centering, or more troublesome. But you don't have to worry about it, so let's share it. It is easy to achieve the center effect of elements in horizontal and vertical direction through flex layout.

Center horizontally

Horizontal centering is the simplest we'll look directly at the code.

1. Horizontal centering of individual elements

CSS Code

. box{    Display:flex;    Justify-content:center;      Background: #0099cc}h1{    color: #FFF}

HTML code

<div class= "box" >    
In this code, we just need to add two attributes to the parent element of the H1 tag, and the Justify-content function is to center the class for box's div box. The box is centered, the elements inside the box are centered naturally, and the advantage is that you don't need to set any style on the element that needs to be centered (H1), if: Width,margin.
2. Multiple H1 elements are centered horizontally
 HTML code
<div class= "box" >    
CSS Code
. box{    Display:flex;    Justify-content:center;    width:100%;    Background: #0099cc}h1{    font-size:1rem;    Padding:1rem;    border:1px dashed #FFF;    Color: #FFF;    Font-weight:normal;}
The code is quite neat, in the flex layout, the object is the child element and the parent element, so here we might as well as the body as a normal label use, although rarely used, but in order to explain the body tag is also very grounded gas, So in this case, the body tag is used as the parent element of box.
Now let's analyze the code, there are two things in Flex, one is the Flex container (the subproject parent element), and the other is a subproject (the Flex container child element). If you do not add a style to the. box, a H1 tag takes up one line, which means that the page will display three lines of text "Flex elastic layout justify-content attribute element is horizontally centered". If we add display:flex to. box, then the three H1 labels are properly lined up in a row, which is equivalent to floating, except that he will not be wrapped in a line that is more than the width of the. box.
Element is centered vertically
Element Vertical Center in the beginning of the development is sometimes more troublesome, but with the flex layout after all the complexity of the simple! Let's take a look at the example!
1. Single H1 label vertically centered
 HTML code
<div class= "box" >    
CSS Code
. box{    Display:flex;    width:980px;    Height:30rem;    Align-items:center;    Background: #0099cc}h1{    font-size:1rem;    Padding:1rem;    border:1px dashed #FFF;    Color: #FFF}
In order for everyone to see clearly, define the high, blue background of the. box; Add a border to the H1 element. In this way, the H1 element is obediently centered, do not have to set the height of H1, no absolute positioning, yes, it is so simple and rude.
2. Multiple H1 labels are centered vertically
HTML code
<div class= "box" >    
CSS Code
. box{    Display:flex;    width:980px;    Height:30rem;    Align-items:center;    Background: #0099cc}h1{    font-size:1rem;    Padding:1rem;    border:1px dashed #FFF;    Color: #FFF}
The above example has more than two H1 tags on the HTML code, and the style has not changed. With flex vertically centered, the element, picture, text center problem instantly vanished.
Note: The DIV,H1 tag is just an example, and the Flex attribute also applies to other tag HTML tags.
If you want the parent element to be centered horizontally, you just need to give the body a property to be OK. The code is as follows:
body{    Display:flex;    Justify-content:center;}
In order to see the effect, here we set the width of the. box to 960px and the background color to #0099cc.
3. Multi-line H1 label Vertical Center
HTML code
<div class= "box" >    
CSS Code
. box{    Display:flex;    width:980px;    Height:30rem;    Justify-content:center;    Background: #0099cc;    flex-direction:column}h1{    Display:flex;    Justify-content:center;    Font-size:1rem;    Padding:1rem;    border:1px dashed #FFF;    Color: #FFF}
Because of the elastic container. Box added Display:flex; Properties, the sub-items are arranged horizontally by default, so add a Flex-direction:column property to the. box to arrange the sub-items vertically. At this point the vertical direction is the main axis, so we can use a Justify-content:center to center all the sub-items vertically. In order to let the text within the H1 tag also be centered horizontally, we also gave H1 a Dislay:flex, and Justify-content:center, because H1 is the default horizontal arrangement, so Justify-content:center You can have the text centered in the horizontal direction.
Here we only need to pay attention to the use of justify-content:center, its role is to define the flex project in the spindle direction of the aligns. You can also learn more in this article, "CSS3 Flex layout usage details."
Finally, let's take a complete example, with horizontal, vertical centering, and we're going to take a look at the example
 HTML code
<div class= "box" >     
CSS Code
body{display:flex;justify-content:center}.box{    Display:flex;    width:980px;    Height:30rem;    Justify-content:center;    Background: #0099cc;    Flex-direction:column;    Align-items:center;} h1{    Display:flex;    Justify-content:center;    Font-size:1rem;    Padding:1rem;    border:1px dashed #FFF;    Color: #FFF;    Width:28rem}
Code Analysis: In order to let H1 in the text center, we have added to the H1 Display:flex; and Justify-content:center, in order to get H1 vertically centered in. box, we add display:flex to. box; As well as the Justify-content:center property. And the Align-items:center in box is to let the H1 level center. The function of this property is to define how the item is aligned on the intersection axis. Since we have used flex-direction:column; So the vertical direction as the spindle, the cross axis is naturally horizontal direction. To let. Box also be centered horizontally, we also define the Body{display:flex;justify-content:center}
PS: The actual effect of the code and the image display may not be the same, because the code is the simplest, to map the code, in order to achieve the picture to demonstrate the effect, so the code is slightly modified.
Transferred from: http://www.myexception.cn/flex/2025243.html
CSS3 Flexbox Lightweight for horizontal and vertical centering of elements