css 居中问题总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 居中问题总结相关的知识,希望对你有一定的参考价值。

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;
}

 

以上是关于css 居中问题总结的主要内容,如果未能解决你的问题,请参考以下文章

css常用代码片段 (更新中)

css 居中问题总结

CSS 水平居中总结

很实用的JQuery代码片段(转)

CSS垂直水平居中的方式总结

CSS水平垂直居中方法总结