Front-end interview series-CSS basics-div horizontal and vertical centering && text centering (single line text, multi-line text)

One, the div is centered horizontally and vertically

1.flex

The detailed introduction and application of flex can be seen:
Flex (flexible layout) realizes five common layouts

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;           
        background-color: #ccc;            
        display: flex;            
        justify-content: center;//水平居中
        align-items: center;//垂直居中
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }    

2.position (the element has a known width and height)

• The parent element is set to: position: relative;
• The child element is set to: position: absolute;
• Child element left: 50%; top: 50%; (the left and top percentages are based on the parent element )
• Then the distance of half of the width and height of the child element with negative margin can be achieved

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        left: 50%;            
        top: 50%;            
        margin: -50px 0 0 -50px;        
    }    

3.position transform (unknown width and height of the element)

Just replace the margin: -50px 0 0 -50px; in the above example
with: transform: translate(-50%,-50%);
(the percentage in translate is based on itself)

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        left: 50%;            
        top: 50%;            
		transform: translate(-50%, -50%);        
    }    

4.position (known width of the element) maigin: auto

• position: absolute;
• top: 0;
• bottom: 0;
• left: 0;
• right: 0;
• margin: auto;

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        top: 0;            
        bottom: 0;            
        left: 0;            
        right: 0;            
        margin: auto;    
    }    

5.table-cell

Set display: table-cell for the parent element, and set vertical-align: middle,
and then set the margin-left and margin-right of the child element to auto.

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
       width: 500px;
       height: 500px;
       background: gray;
       display: table-cell;
       vertical-align: middle;
    }        
    .box .context{            
	      width: 200px;
	      height: 200px;
	      background: blue;
	      margin-left: auto;
	      margin-right: auto;
    }    

Two, the text is vertically centered (single-line text, multi-line text)

This section introduces vertical centering and horizontal centering settings text-align: center;

1. Use line-height and vertical-align

<div class="word-vertically-center1">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center1 div {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    line-height: 200px;
}

.word-vertically-center1 span {
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}

2.利用display:table-cell

<div class="word-vertically-center2">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center2 div {
    display: table-cell;
    width: 200px;
    height:150px;
    border:1px solid blue;
    vertical-align: middle;
}

3. Use flex layout align-items: center;

<div class="word-vertically-center3">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center3 div{
    float: left;
    width: 200px;
    height:150px;
    border: 1px solid #000;
    display: flex;
    align-items:center;
}

Reference: https://blog.csdn.net/qq_39903567/article/details/114951168

Link to this article: https://blog.csdn.net/qq_39903567/article/details/115263277