码迷,mamicode.com
首页 > Web开发 > 详细

CSS垂直居中

时间:2020-02-12 13:10:07      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:play   etag   mic   mamicode   javascrip   css   ber   color   asc   

方法1:table-cell

 

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;       
}
 
<div class="box box1">
        <span>垂直居中</span>
</div>

 

 

   技术图片

 

 

方法2:display:flex

.box2{

    display: flex;
    justify-content:center; //横
    align-items:Center;  //竖
}

 

 方法3:定位

.eleTag{
 
/*设置元素绝对定位*/
position:absolute;
top 50%; 
left: 50%;
/*css3 transform 实现*/
transform: translate(-50%, -50%);

}

 

CSS垂直居中

标签:play   etag   mic   mamicode   javascrip   css   ber   color   asc   

原文地址:https://www.cnblogs.com/congxueda/p/12298499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!