![a336534d9efb6aa1ea754d0028015afb.png](https://i-blog.csdnimg.cn/blog_migrate/82aa04616dc5b170f7fb235468518762.jpeg)
以下outer为外部元素,inner为需要垂直水平居中的元素。
一、使用position结合transform
.
二、使用position结合margin
.
三、使用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;
}