How to center an element horizontally and horizontally

How to center an element horizontally and horizontally

In the project, you will often encounter center problems. Here we will summarize the answers from du Niang:

1. horizontal center of Elements

1. horizontal center of Row-level elements

<Div style = "width: 200px; height: 100px; border: 1px solid cyan; text-align: center; "> <span> horizontal center of Row-level elements </span> </div>

　　

Obviously, when the child element is a row-level element, you only need to set the parent element text-align: center.

2. horizontal center of block-level elements

<Div style = "width: 200px; height: 100px; border: 1px solid cyan;"> <div style = "border: 1px solid indianred; margin: 0 auto; height: 50px; width: 80px; "> horizontal center alignment of block-level elements </div>

　　

Obviously: when the child element is a block-level element, you only need to set the parent element margin: 0 auto.

3. horizontal center of absolute positioning Elements

Html code

　　

Css code

　　

 

　　

4. Align the positioning element horizontally

Css code

　　

Html code

　　

Note that the width of the parent element is given. The principle is to first offset the label element by 50% to the right, and then shift the width by half.

5. Center of floating Elements

Elements located using float

Css code

　　

Html code

　　

　　

This effect is similar to 4th types:

　　

For the common horizontal center, there are also some other ways to solve the center problem, such as flex layout and table.

I wrote a summary for the first time. If you have any omissions or errors, please correct me!