分析:
(1)实现屏幕居中
使用绝对定位(position: absolute)
(2)实现文本居中
使用弹性盒子(display:flex),使项目居中对齐(align-items: center垂直居中)(justify-content: center水平居中)
强烈建议:使用文本居中对齐(text-align: center)和行高设置(line-height)
代码:
使用弹性盒子
.center{
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
/* 使用绝对位置实现屏幕居中 */
display: flex;
align-items: center;
/* 弹性盒子垂直居中 */
justify-content: center;
/* 弹性盒子水平居中 */
transform: translate(-50%,-50%);
/* 向左向上移动宽度和高度的一半 */
}
不使用弹性盒子