css 居中问题总结

2018-06-24 01:46:01来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

html代码:

<div class="box">
    <div class="box-item">
        文字
    </div>
</div>

 

css样式:

一、水平居中

.box-item{
    text-align:center;
}

  *一般用于文字以及inline-block/inline水平居中 ,设置该值表示box-item内文字居中对齐

 

.box-item{
    margin:0 auto;
}

  *一般用于类似div的block水平居中,表示box-item整个div在box内水平居中对齐

 

二、垂直居中

  • 高度等于行高,适合单行文字居中对齐
.box-item{
    line-height:30px;
    height:30px
}     

 

  • margin为高度一半
.box{
    width:100%;
    height:100%;
    margin:0;
    padding:0
}
.box-item{
    width:100px;
    height:100px;
    border:1px solid #ccc;
    position:relative;
    top: 50%;
    margin: -150px auto 0 auto;
}

 

  •  前一种方式的改良版
.box{
    width:100%;
    height:100%;
    margin:0;
    padding:0
}
.box-item{
    width:100px;
    height:100px;
    border:1px solid #ccc;
    position:relative;
    top: 50%;
    margin:0 auto;
    transform: translateY(-50%);
}

 

  • align-items存在兼容性问题
.box {
    display: flex;
    align-items: center; 
    justify-content: center; 
}
.box-item {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

 

  • 兼容性较好的几种:
.box-item{
    margin:auto;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

 

.box{
    position: relative;
    height:100%;
    width:100%;
}

.box-item{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

 

.box{
    text-align: center;
    overflow: auto;
    height:100%;
}

.box:after,.box-item{
    display: inline-block;
    vertical-align: middle;
}
.box:after {
    content: '';
    height: 100%;
    margin-left: -0.25em;
}

.box-item{
    max-width: 99%;
}

 

  • 表格法
.box{
    display:table;
    width:100%;
    height:100%;
}
.box-item {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS边框外的小三角形+阴影效果的实现。

下一篇:两天学会css基础(一)