Here are some ways to use CSS to center elements

Case Template:

<body>
    <div id="main">
        <div id="center"</div> </div> </body> <style> Body {height: 200px; }#main{
        border:1px red solid;
    }
    #center{
        border: 1px green solid;
    }
</style>
Copy the code

One, horizontal center

1. Use margin:0 auto with the width of the element

#center{
    width: 100px;
    margin: 0 auto;
}
Copy the code

For a centered element to satisfy two conditions: first, the element needs to have a fixed width value; Both the margin-left and margin-right elements must be set to Auto; any loss of either condition will not allow the element to be centered horizontally.

Disadvantages: Need to fix the width of the center element.

Note: When the element is in position:absolute; , margin:0 auto is invalid, both right and left need to be set to 0, as shown below:

#center{
    width: 100px;
    margin: 0 auto;
    position:absolute;
    right:0;
    left:0;
}
Copy the code

2. Use absolute positioning with margin

#center{width: 100px; position: absolute; left: 50%; margin-left: -100px; /* Value is half of width */}Copy the code

The center element has a negative “margin-left” value equal to half the width, and a relative “position: relative” on its parent element if the element is not relative to the browser.

Disadvantages: Need to fix the width of the center element.

Both of the above methods must have a fixed width value, and the following will address methods that do not require a fixed width value.

3. Block-level parent elements center inline elements

#main{
    text-align: center;
}
Copy the code

Sets the text-align attribute to the parent of the centered element.

Advantages: There is no need to set the element’s fixed width.

Disadvantages: Centered elements must be inline or set to inline-block.

4. Use relative positioning and inline styles

#main{
    display: inline-block;
    position: relative;
    left: 50%;
}
#center{
    display: inline-block;
    position: relative;
    right: 50%;
}
Copy the code

1, Set both #main and # Center to inline-block to wrap their contents:

2. Move #main 50% of its width to the right:

3, Then move # Center 50% of its width to the left:

4. Finally, the #center element is centered.

Advantages: There is no need to set the element’s fixed width.

Disadvantages: The element of the center element is set to inline-block.

5. Set by transform

#main{
    position: relative;
}
#center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
Copy the code

First left:50% right shift #main50% width, then 50% left shift itself 50% width via translateX(-50%).

Advantages: There is no need to set the element’s fixed width.

Disadvantages: Centered elements are set to absolute.

6. Flex box

#main{
    display: flex; 
    justify-content: center; 
}
Copy the code

Advantages: There is no need to set the element’s fixed width.

Disadvantages: The parent element is set to Flex.

Two, vertical center

1, pass line-height

#main{
    height: 200px;
    line-height: 200px;
}
Copy the code

The parent element of the centered element must have the exact height. And the center element will be distorted if it is multiple lines of text. This works well for small elements, single lines of text.

Disadvantages: You need to fix the height of the parent element, and the center element is confusing if it is multi-line text. Only suitable for small elements, single lines of text.

2. Use absolute positioning with margin

#main{
    position: relative;
}
#center{height: 50px; position: absolute; top: 50%; margin-top: -25px; /* the value is half of height */} or#center{
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
}
Copy the code

Disadvantages: Need to fix the height of the center element.

Both of these methods must set a fixed height, but the following will solve for methods that do not require a fixed heignt value.

3. Set table-cell to vertical-align

#main{
    height: 100%;
    display: table;
}
#center{
    display: table-cell;
    vertical-align: middle;
}
Copy the code

The parent element is set to display:table; The child element is set to display:table-cell; And set vertical-align:midden;

4. By adding an extra tag

<body>
    <div id="main">
        <div id="center"> This block is centered </div> <div id="other"></div>
    </div>
</body>
<style>
#main{
    height: 100%;
}
#center,#other{
    display: inline-block;
    vertical-align: middle;
}
#other{
    height: 100%;
}
</style>
Copy the code

Set vertical-align: middle for the inline-block element of the same line. The inline-block elements in the line will be aligned with the vertical center line of the element.

Disadvantages: An additional element is required.

5. Set by transform

#main{
    height:100%;
    position: relative;
}
#center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Copy the code

First move #main50% down, then move itself 50% up via translateY(-50%).

Advantages: There is no need to set a fixed height for elements.

Disadvantages: Centered elements are set to absolute.

There is another way to get down to 50% of #main

#center{margin:50% auto 0; / / move down toThe height of the # main50%transform: translateY(-50%); } or#center{margin:50vh auto 0; Transform: translateY(-50%); }Copy the code

6. Flex box

#main{
    height:100%;
    display: flex; 
    align-items: center; 
}
Copy the code

Advantages: There is no need to set the element’s fixed width.

Disadvantages: The parent element is set to Flex.