[CSS] Several methods to center elements (including vertical centering and horizontal centering), web page diagram

table of Contents

Preface

text

1. Several methods for vertical centering of elements

Two, several ways to make the elements horizontally displayed in the center

Three, the method of vertical centering together (combined use of the above)

to sum up

---

Preface

There are actually many ways to achieve element centering. Mastering one is actually not enough, because in front of different layouts and needs, you have to choose different solutions. Sometimes when you design a page, centering is also a more distressing problem. Let's analyze the various methods of realizing centering and the usage in different occasions.

text

1. Several methods for vertical centering of elements

1. Use the vertical-align property attribute of the table.

Description

 The vertical-align attribute defines the vertical alignment of the baseline of the element in the line relative to the baseline of the line where the element is located. Allows you to specify negative length values ​​and percentage values. This will lower the element rather than raise it. In table cells, this property will set the alignment of the cell content in the cell box.

middle

Place this element in the middle of the parent element.

    <div class="wrapper">
        <div class="cell">
            <div class="content">
               //
            </div>
        </div>
    </div>

.wrapper {
    display: table;
    background: rgb(159, 200, 214);
    height: 150px;
    overflow: hidden;
}
.cell {
    display: table-cell;
    vertical-align: middle;
    background: rgb(209, 171, 159);
    height: 100px;
}

effect:

Advantages and disadvantages:

Advantages: content can dynamically change the height (no need to define in CSS). When there is not enough space in the wrapper, the content will not be truncated

Disadvantages: Invalid in Internet Explorer (even IE8 beta), many nested tags, the width is controllable but the height is uncontrollable when the content is too much.

2. Using an absolutely positioned div, set its top to 50% and top margin to a negative content height/2.

    <div class="box2">
        <div class="content2">
           //
        </div>
    </div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content2 {
    position: absolute;
    top: 50%;
    height: 150px;
    width: 300px;
    margin-top: -75px;
    /* negative half of the height */
    background: rgb(167, 200, 216);
    overflow: auto;
}

effect:

Advantages and disadvantages:

The width and height can be set, and the height must be set, which means that the object must have a fixed height specified in CSS. Because there is a fixed height, you may want to specify overflow:auto for content, so that if there is too much content, scroll bars will appear to prevent content from overflowing.

Advantages: Applicable to all browsers<br>No need to nest tags

Disadvantages: When there is not enough space, content will disappear (similar to the div in the body, when the user shrinks the browser window, the scroll bar does not appear)

3. Add the floater div, the height of the floater: 50% of the box; margin-bottom: the height of the content plus the bottom margin / 2

<div class="box">
    <div class="floater"></div>
    <div class="content3">
        //
    </div>
</div>

.box {
    width: 400px;
    height: 300px;
    background: rgb(212, 159, 159);
}
.floater {
    height: 50%;
    margin-bottom: -80px;
    /* content的高加上下内边距 / 2*/
}
.content3 {
    width: 300px;
    height: 140px;
    background: #abc;
    overflow: auto;
}

effect:

The idea of ​​this method is actually to use an additional floater element to indirectly place content in the middle of the parent element.

Advantages and disadvantages:

        advantage:

•         Applicable to all browsers
•         When there is not enough space (for example: the window is shrunk), the content will not be cut off, and the scroll bar will appear (the scroll bar here refers to the scroll bar of the window)

        Disadvantages: additional empty elements are required

4. A position:absolute is used

<div class="box2">
    <div calss="content4">
        //
    </div>
</div>

 

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

effect:

A div with a fixed width and height. This div is set to top:0; bottom:0;. But because it has a fixed height, it can't be spaced at 0 between the top and bottom, so margin:auto; will center it. It is very simple to use margin:auto; to center block-level elements vertically.

Advantages: simple 

Disadvantages:

• Not valid in IE (IE8 beta)
• When there is not enough space, the content is truncated, but there will be no scroll bar (the scroll bar of the browser window), you need to add overflow: auto;

5. Simply set the line-height to the height value of that object to center the text. This method can only center a single line of text

<div class="box2">
    <div class="content5">
        只能一行
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content5 {
    height: 200px;
    line-height: 200px;
    background: rgb(204, 187, 238);
}

effect:

advantage:

• Applicable to all browsers
• Will not be truncated when there is not enough space

Disadvantages:

• Only valid for text (block-level elements are invalid)
• When multiple lines, word break is worse
•  This method is very useful for small elements, such as centering button text or single-line text.

6. Use flex layout "flexible layout"

This method is more advanced and can be applied to multiple block elements that need to be standardized. When there are multiple sub-elements, it is best to evenly allocate space and use flexible layout. Of course, when there is only one sub-element, you can The realization is centered.

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    align-items: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

advantage:

• Different pass calculation
• Can be nested

Disadvantages: When there is not enough space, the content is truncated (by the browser), but there will be no scroll bar

Two, there are several ways to display the elements horizontally in the center.

1. Use automatic margins to achieve centering

<div class="box2">
    <div class="container1">
         //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container1 {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    background: #abc;
}

   

The preferred way to center an element horizontally in CSS is to use the margin attribute—set the margin-left and margin-right attributes of the element to auto . In actual use, we can create a container div for these elements that need to be centered. One thing that needs special attention is that the width of the container must be specified

Advantages: the most correct and reasonable method, simple

Disadvantages: not supported by IE6 and below

2. Use text-align to achieve text centering

<div class="container2">
    //   
</div>

.container2 {
    width: 300px;
    background: #eee;
    text-align: center;
}

body{text-align:center;}, the text of all descendant elements of body will be displayed in the center.

Advantages: compatible with most browsers

Disadvantages: This method does not apply the text attribute to the text, but applies it to the element as the container, so it is necessary to additionally set the text-align of the text attribute to left. A browser that truly complies with the standard will not change the position of the container, but will only display the text in the center.

 3. Combination of automatic margins and text alignment

<div class="box2">
    <div class="container3">
            //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container3 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    width: 300px;
    text-align: left;
}

            Because the text alignment and centering method has good backward compatibility, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two to use them in order to maximize the cross-browser support for the centering effect. :

Advantages: maximize cross-browser support for the centering effect

Disadvantages: additional rules are required

4. Negative margin solution

<div class="box2">
    <div class="container4">
       //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container4 {
    background: rgb(255, 255, 168);
    position: absolute;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    text-align: left;
}

The negative margin solution is far more than just adding negative margins to elements. This method requires the use of both absolute positioning and negative margin techniques at the same time.

advantage:

• Applicable to all browsers
• No need to nest tags

Disadvantages: need to set the width of the container and calculate

5. Use flex layout "flexible layout" 

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

justify-content: center; /* Horizontally centered*/

advantage:

• Different pass calculation
• Can be nested

Disadvantages: When there is not enough space, the container is truncated (relative to the browser), but there will be no scroll bar

Three, the method of vertical centering together (combined use of the above)

1. A position:absolute is used

<div class="box2">
    <div class="content4">
        //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

2. Use flex layout "flexible layout" 

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
    align-items:center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

 

to sum up

It is not difficult to understand. The important thing is to try to see the effect by yourself to truly understand.