元素水平垂直居中【弹性布局 || Translate】

最新推荐文章于 2025-03-18 22:30:33 发布

一喵呜

最新推荐文章于 2025-03-18 22:30:33 发布

阅读量2.1k

点赞数 1

分类专栏： CSS3 HTMl5 HTML5自由者

本文链接：https://blog.youkuaiyun.com/html5_/article/details/46574873

版权

HTML5自由者同时被 3 个专栏收录

94 篇文章

订阅专栏

HTMl5

81 篇文章

订阅专栏

CSS3

35 篇文章

订阅专栏

/**
* 游戏排行版
*/
.yblist {
     position: absolute;
     width: 100%;
     height: 100%;
     background: #000;
     opacity: 0.9;
     z-index: 999;
}

/*弹性布局方法*/
.flex {
     display:-webkit-box; 
     display:-ms-flex; 
     display:-webkit-flex; 
     display:flex;
}
.flex-hc {
     -webkit-box-pack:center; 
     -ms-justify-content:center; 
     -webkit-justify-content:center; 
     justify-content:center;
}
.flex-vc {
     -webkit-box-align:center; 
     -ms-align-items:center; 
     -webkit-align-items:center; 
     align-items:center;
}
/*transform方法*/
.transCenter {
     position: absolute; 
     left:50%; 
     top:50%; 
     -webkit-transform:translate(-50%,-50%); 
     transform:translate(-50%,-50%);
}

  <!-- 排行版 -->

     <!-- /*弹性布局方法*/ -->
     <div class="yblist flex flex-hc flex-vc">
          <span style='color:#FCF'>21</span>
     </div>

     <!-- /*transform方法*/ -->
     <div class="yblist">
          <span style='color:#FCF' class='transCenter'>21</span>
     </div>