实现元素垂直居中的方法很多,相信大家都能说出几种。相对于PC端,移动端的方法会更多点,平时在网上收集了一些,在此贴出来分享给大家,仅供参考。
方法1:table-cell
html结构
- <div class="box box1">
- <span>垂直居中</span>
- </div>
CSS
- .box1{
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
方法2:display:flex
- .box2{
- display: flex;
- justify-content:center;
- align-items:Center;
- }
方法3:绝对定位和负边距
- .box3{
- position:relative;
- }
- .box3 span{
- position: absolute;
- width:100px;