css布局

标签：ati   round   center   code   add   transform   pos   元素   lex   

垂直居中

方案一：relative + top

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.conten
    width: 300px;
    height: 300px;
    background: orange;
    margin: 0 auto;     /*水平居中*/
    position: relative;     /*脱离文档流*/
    top: 50%;   /*偏移*/
    margin-top: -150px;
    
    transform: translateY(-50%); // 偏移自身高度的50%
}

方案二：flex布局

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
    width: 300px;
    height: 300px;
    background: orange;        
}

水平居中

方案一：margin: 0 auto;

css布局

标签：ati   round   center   code   add   transform   pos   元素   lex   

原文地址：https://www.cnblogs.com/nanhuaqiushui/p/11774263.html