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

谁借莪１个温暖的怀抱￠ 2022-11-13 14:28 142阅读 0赞

### 文章目录 ###

*  一、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(弹性布局)实现五大常用布局][Flex]

.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中的百分比是基于自身的）**

## 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即可

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

![image.png][]

### 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_114951168]

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115263277][https_blog.csdn.net_qq_39903567_article_details_115263277]

[Flex]: https://blog.csdn.net/qq_39903567/article/details/114754898
[image.png]: /images/20221022/1e019b621db744b4b3ab4cb849808bbd.png
[https_blog.csdn.net_qq_39903567_article_details_114951168]: https://blog.csdn.net/qq_39903567/article/details/114951168
[https_blog.csdn.net_qq_39903567_article_details_115263277]: https://blog.csdn.net/qq_39903567/article/details/115263277