一、div水平垂直居中

1.flex

<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 （元素已知宽高）

父元素设置为：position: relative;
子元素设置为：position: absolute;
子元素 left: 50%; top: 50%; (left、top百分比基于父元素)
然后margin负的子元素自身宽高度的一半距离就可以实现

<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 （元素未知宽高度）

只需将上面例子中的 margin: -50px 0 0 -50px;
替换为：transform: translate(-50%,-50%);
（translate中的百分比是基于自身的）

<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（元素已知宽度）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

给父元素设置display:table-cell，并设置vertical-align:middle
然后设置子元素的margin-left和margin-right为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;
    }

二、文本垂直居中(单行文字、多行文字)

本部分介绍垂直居中，水平居中设置 text-align: center;

1.利用line-height和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.利用flex布局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;
}

参考:https://blog.csdn.net/qq_39903567/article/details/114951168

本文链接：https://blog.csdn.net/qq_39903567/article/details/115263277

前端面试系列-CSS基础-div水平垂直居中&&文本居中(单行文字、多行文字)

文章目录