大白话之垂直水平居中

192 阅读1分钟

基础准备

html:

h.div('wrap',{},h.div('box',{},h.p('',{},'这是一段文字')))  

方法1:flex-- 更适合移动端

.wrap{
    display:flex;
    justify-items:center;
    align-items:center;
}

方法2:transform --无须知道子元素的高度和宽度

.wrap{positon:relative}
.box{
    position:absolute;
    left:50%;
    top:50%;
    translate:transform(-50%,-50%);
}

方法3:absolute--需要知道子元素的宽和高

.wrap{position:relative}
.box{
    width:100px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-50px 0 0 -50px;
}

每天积累一点点,虽然还是不会。。。

avatar