This is the second day of my participation in the August Text Challenge.More challenges in August

CSS horizontal center alignment is one of the most important skills for front-end engineers. It is also one of the most frequently asked questions in interviews. Mastering this skill will help you avoid pitfalls in the interview process.

This article summarizes six techniques for horizontal or vertical centralization of CSS:

1. line-height

Usage scenario: Single line of text is vertically centered

.example1{    
    width: 400px;    
    background: #afddf3;    
    line-height: 50px;
 }
Copy the code

2. Absolute + margin

Principle: Set absolute positioning, top: 50%; After, set the height of half of the negative implementation. After all, it’s a simple math problem. No browser compatibility problems exist.

.example2 {    
    position: relative;    
    margin-top: 10px;    
    width: 400px;    
    height: 150px;    
    font-size: 0;    
    border: 1px solid #dcdcdc;
}
.example2 .con {    
    position: absolute;    
    top: 50%;    
    height: 80px;    
    margin-top: -40px;    
    width: 300px;    
    font-size: 15px;    
    background: #afddf3;
}
Copy the code

3. absolute + translate

Transform: Translate (-50%, -50%); transform: Translate (-50%, -50%) Displacement of the middle element by 50% of its width and height will do the trick. Bug: Translate is a CSS3 attribute, which is not supported by older browsers. Advantage: No need to fix the width and height of the positioning elements.

.example3 {    
    position: relative;    
    margin-top: 10px;    
    width: 400px;    
    height: 150px;    
    font-size: 0;    
    border: 1px solid #dcdcdc;
 }
 .example8 .con {    
     position: absolute;    
     left: 50%;    
     top: 50%;    
     transform: translate(-50%, -50%);    
     font-size: 15px;    
     background: #afddf3;
 }
Copy the code

4. Horizontal centered margin: 0 auto

Usage: This method is suitable for horizontal center alignment of block-level elements, which is also a common method. Note that a width must be set in this way.

.example4{ width: 300px; margin: 0 auto; }

5. Flex + align-items + context-content

Principle: Elastic layout, align-items vertically centered, context-content horizontally centered Features: CSS3 property, not supported by younger browsers. There is no need to fix the width and height of the positioning element, and the code is clean and neat.

.example5 {    
    display: flex;    
    align-items: center;    
    justify-content: center;
}
Copy the code

6. Horizontal center of block elements (variable width)

How it works: In practice, we will need to center “block-level elements of variable width”, such as page navigation on a web page, because the number of pages is uncertain, so you cannot limit its flexibility by setting the width.

Text-align :center; text-align:center; Text-align :center; text-align:center; To achieve the center effect.

Display can be set to inline type or inline-block (set to display inline elements or inline block elements) when the width of an indefinite block-level element does not occupy a line.

<div class="example6">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
Copy the code
.example6 {
    text-align: center;
    background: beige;
}
.example6 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
.example6 li {
    margin-right: 8px;
    display: inline-block;
}
Copy the code

Conclusion: There are many ways to realize horizontal and vertical alignment. You can learn and memorize them according to your own understanding. Line-height, margin:0 auto, Flex and absolute positioning are commonly used methods in work, and we strongly recommend that you must master them.