居中解决方案荟萃

原文链接 http://blog.poetries.top/2016/11/12/CSS-center-methods/

关注公众号获取更多资讯

在线预览 http://sandbox.runjs.cn/show/oljhupi9

水平居中方案


方案一:text-align + inline-block


水平居中
#parent1{
    text-align: center;
    background:#ddd;
    margin-bottom:20px;
}
#parent1 .child{
    display: inline-block;
    background:#666;
    color:#fff;
}

方案二:margin:0 auto


水平居中
#parent2{
    text-align: center;
    background:#ddd;
    margin-bottom:20px;
}
#parent2 .child{
    display: table;
    margin: 0 auto;
    background:#666;
    color:#fff;
}

方案三:absolute+transform


水平居中
#parent3{
    position: relative;
    background:#ddd;
    margin-bottom:20px;
}
#parent3 .child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background:#666;
    color:#fff;
}


方案四:justify-content


水平居中
#parent4{
    display: flex;
    justify-content: center;
    background:#ddd;
    margin-bottom:20px;
}
#parent4 .child{
    margin:0 auto;
    background:#666;
    color:#fff;
}

垂直居中方案


方案一: 利用 line-height 实现垂直居中


  • 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的内容会溢出
单行文字垂直居中
#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

方案二 利用 display: table 实现垂直居中


块区域垂直居中
#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
            margin-bottom:20px;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

方案三 margin 填充 这种方法需要知道内外容器的大小


块区域垂直居中
#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
            margin-bottom:20px;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

方案四:经典 absolute 布局上下文垂直居中


块区域垂直居中
#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
        margin-bottom:20px;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

方案五:absolute+transform


块区域垂直居中
#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
    margin-bottom:20px;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

方案六 利用margin:auto 居中


Content here
#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
        margin-bottom:20px;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

方案七 利用 Flex布局 居中


Content here
#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

你可能感兴趣的:(居中解决方案荟萃)