实现元素水平与垂直居中的几种方式

一、单行文本垂直居中(适用于一行简短的文字)

实现css代码：

width:300px;height:300px;text-align :center;line-height:300px;

效果：

 

 

 

 

二、多行文本垂直居中

实现css代码：

1、使用display:table来实现

width: 300px;
height: 300px;
display: table; //使块状元素成为一个块级表格; 
display: table-cell; //子元素设置成表格单元格; 
vertical-align: middle; //使表格内容居中显示，即可实现垂直居中的效果;

2、absolute与transform配合使用

width: 300px;
height: 300px;
position:absolute;  //首先给文本绝对定位；
left:50%;top:50%;  //文本距离盒子左边和上边分别为50%
transform:translate(-50%,-50%);   //用transform向左（上）平移它自己宽度（高度）的50%

3、使用flex实现

width: 300px;
height: 300px;
display: flex;  //定义为弹性容器
align-items: center;  //垂直对齐居中
justify-content: center;   //水平对齐居中

效果：

 

 

 

 

三、宽度不固定文本垂直居中

当内容宽高不能确定，需要整个div垂直居中时，可将代码外侧增加一个div，在外侧div中编写垂直居中代码

实现css代码 ：

.demobox{
    width:90%;
    height:90%;
    margin:20px auto;
    background: blue;
    display: flex;
    align-items: center;
    justify-content: center
}
.demo{background: red;text-align: center}

效果：