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

文章目录

一、div水平垂直居中
- 1.flex
- 2.position （元素已知宽高）
- 3.position transform （元素未知宽高度）
- 4.position（元素已知宽度）maigin：auto
- 5.table-cell
二、文本垂直居中(单行文字、多行文字)
- - 1.利用line-height和vertical-align
  - 2.利用display:table-cell
  - 3.利用flex布局align-items:center;

一、div水平垂直居中

1.flex

flex的详细介绍和应用可以看：
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负的子元素自身宽高度的一半距离就可以实现

.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;

.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;
}