学习CSS布局-垂直水平居中

学习大纲

水平居中
垂直水平居中

水平居中



    水平居中


方法一
优点:兼容性好，甚至可以兼容ie6、ie7
缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原
.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

方法二
优点：只设置了child，ie8以上都支持
缺点：ie6、ie7不支持将div换成table
.parent {
}

.child {
    display: table;
    margin: 0 auto;
}

方法三
优点:居中元素不会对其他的产生影响
缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方法四
优点: 简单快捷
缺点: 低版本浏览器(ie6 ie7 ie8)不支持
.parent {
    display: flex;
}

.child {
    margin: 0 auto;
}

方法五
优点:简单快，设置parent即可
缺点:低版本浏览器(ie6 ie7 ie8)不支持
.parent {
    display: flex;
    justify-content: center;
}

.child {
}

方法六
使用grid网格布局
.parent {
    
    display: grid;
}

.child {
    justify-self: center;
}

水平垂直居中


    child


方法一
absolute + 负margin值
父元素设置相对定位，子元素设置绝对定位，margin值设置为负数
注意：子元素需要定宽高
 .parent {
    
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;

    width: 100px;
    height: 100px;
    background: #f00;
}

方法二：
absolute + margin auto
父元素设置相对定位，子元素设置绝对定位，margin值设置auto，四个方向设置为0
注意：子元素需要定宽高
.parent {
    
    position: relative;
    
    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    width: 100px;
    height: 100px;
    background: #f00;
}

方法三：
absolute + calc
父元素设置为相对定位，父元素设置绝对定位，使用ralc
注意：子元素需要定宽高
  .parent {
    
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

    width: 100px;
    height: 100px;
    background: #f00;
}

方法四
absolute + transform
父元素设置为相对定位，父元素设置绝对定位，使用transform
注意：子元素不需要定宽高
 .parent {
    
    position: relative;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    background: #f00;
}

方法五
writing-mode
使用writing-mode垂直水平居中
子元素（.item）不需要定宽高


    item
    


.parent {
    
    writing-mode: vertical-lr;
    text-align: center;

    height: 200px;
    width: 200px;
    border: 1px solid #f00;
}

.child {
    
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.item {
    
    display: inline-block;
    margin: auto;
    text-align: left;
    background: #f00;
}

方法六
line-height
父元素定好宽高，使用line-height水平对齐
子元素可以不设置宽高
.parent {
    
    width: 200px;
    line-height: 200px;
    text-align: center;
    
    border: 1px solid #f00;
}

.child {
}

方法七
table
父元素设置table-cell
子元素可以不用设置宽高
.parent {
    
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    
    display: inline-block;

    background: #f00;
}

方法八
使用flex
子元素可以不用设置宽高
.parent {
    
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    background: #f00;
}

方法九
使用grid网格布局
子元素可以不用设置宽高
.parent {
    
    display: grid;

    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}

.child {
    
    align-self: center;
    justify-self: center;
    
    background: #f00;
}

学习CSS布局-垂直水平居中

CSS教程相关栏目本月热门文章