以下outer为外部元素,inner为需要垂直水平居中的元素。
一、使用position结合transform
.Aouter{
position: relative;
}
.Ainner{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-50%,-50%); */ /* 可能会导致模糊 */
transform: translate( calc(-50% + 0.5px), calc(-50% + 0.5px)); /* 解决 */
}
二、使用position结合margin
.Bouter{
position: relative;
}
.Binner{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
三、使用flex布局
这个方法挺方便的。
.Couter{
display: flex;
align-items: center;
justify-content: center;
}
.Cinner{
}
四、添加line-height以及设置vertical-align
这种方法设置了具体的line-height值。
.Douter{
line-height: 100px; /* 在这里使用了具体的值 */
text-align: center;
}
.Dinner{
display: inline-block;
vertical-align: middle;
}
五、超级简易版的flex布局!!
.Eouter{
display: flex;
}
.Einner{
margin: auto;
}
六、table-cell
.Fouter{
display: table-cell;
vertical-align: middle;
}
.Finner{
margin: 0 auto;
}