css 居中问题总结

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

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

.box-item{
    margin:0 auto;
}

.box-item{
    line-height:30px;
    height:30px
}     

.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%);
}

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