码迷,mamicode.com
首页 > 其他好文 > 详细

浮动元素水平垂直居中

时间:2019-05-23 21:14:16      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:div   sla   margin   otto   relative   justify   center   form   osi   

方法一:使用transform属性

.content{ //父元素
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            position: relative;
}
 .box{//子元素
            width: 50px;
            height: 50px;
            position: absolute;
            border: 2px solid salmon;
            float: left; //子元素进行浮动
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            
}

方法二:未知父元素高宽 

 .box{//子元素 父元素进行绝对定位
            width: 50px;
            height: 50px;
            position: absolute;
            border: 2px solid salmon;
            float: left;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin:  auto;
        }

方法三:使用Flex

.content{ //对父元素使用
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            display: flex;
            justify-content: center;
            align-items: center;
        }

方法四:使用table-cell,vertical-align:middle

.content{ //对父元素使用
            width: 200px;
            height: 200px;
            border: 2px solid gainsboro;
            display: table-cell;
            vertical-align:middle;
        }
.box{
            width: 50px;
            height: 50px;
            border: 2px solid salmon;
            margin:auto;
        }

浮动元素水平垂直居中

标签:div   sla   margin   otto   relative   justify   center   form   osi   

原文地址:https://www.cnblogs.com/kbinblog/p/10914250.html

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