Front-end development common layout

In the early stage of page construction, front-end development often requires us to have a framework of thinking, to divide the page block structure according to the design drawing, and to deal with the differences between devices of different sizes. Mastering some common layouts can make us do more with less. This article will talk about centering layouts.

Align text to center

The title of the center alignment refers to the position of the text within a div in the center of its horizontal and vertical directions. Suppose you have the following DOM structure:

 <div class="wrap">
 <span>对齐方式：水平垂直居中</span> 
</div>

The style code is as follows:

 .wrap {
    height: 100px;
    border: 2px solid blueviolet;
}

It might look like this when rendered in the browser:

We use css style to achieve the effect of center alignment step by step

text horizontally centered

This is very basic front-end knowledge, just add text-align: center to the style

 .wrap {
    height: 100px;
    border: 2px solid blueviolet;
    text-align: center;
}

Browser result:

Center text vertically

Now the requirements have to be changed again, and the text needs to be centered vertically in the container. What should I do? Use margin or padding? Or use positioning? Probably not good enough. In fact, as long as you add a line of style, line-height: 100px

 .wrap {
    height: 100px;
    border: 2px solid blueviolet;
    text-align: center;
    line-height: 100px;
}

Browser result:

It can be seen that as long as the line-height of a container is set to be the same as the height, the text inside it can be vertically centered. This property also applies to other tags such as a tag. It is useful when writing button styles that require button text to be centered.

Center-aligned block elements

Consider having the following DOM structure

 <div class="parent02">
    <div class="child01">块元素：垂直居中对齐</div>
</div>

The style code is as follows, and the browser effect is as shown in the figure

 .parent02 {
    height: 100px;
    border: 2px solid rgba(13,202,240,.8);
}
.child01 {
    background-color: rgb(48, 245, 245);
    width: 80%;
    height: 50%;
}

Align horizontal center

Just add a line of margin: 0 auto to .child01 to center it horizontally

 .child01 {
    background-color: rgb(48, 245, 245);
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

Center Align Vertically

Careful friends may notice that the height of .child01 above is set to 50% of the parent, we can set its margin-top or parent02's padding-top to achieve vertical centering, but if the heights of .parent02 and .child01 Not sure about it? I'm afraid you need to constantly modify the style. At this time, flex layout can help, you only need to set it in the parent, add the bottom two lines, no matter how the height of .parent02 and .child01 changes, it can remain centered

 .parent02 {
    height: 100px;
    border: 2px solid rgba(13,202,240,.8);
    display: flex;
    align-items: center;
}

You're done! At this point, the centered layout that this article is going to talk about is coming to an end. Let's review the main key points.

• Use text-align and line-height to center text
• Center block elements with margin: 0 auto and flex

Hope this article can help you ^_^

The article was first published on IICCOM-Personal Blog|Technical Blog Front-end Development Common Layout 🔗