结构-行为-样式-Css Div 居中的一个最佳实践

最近在做项目的时候，经常会有需要各种居中的情况，现在分享一个最佳实践。

<div class="success-bottom">
        <div class="hr-use"></div>
        <div class="youwant">
            <span class="loveicon"></span>
            <span>你可能还想要</span>
        </div>
        <img src="images/active.png" />
    </div>

 

.success-bottom {
    margin-top: 15px;
    background-color: #fff;
    border-top: 1px solid #c8c8c8;
    position: relative;
}
.success-bottom .loveicon {
    background: url("bgimg/icon-love.png") no-repeat left center;
    display: inline-block;
    width: 25px;
    height: 26px;
    position: absolute;
    background-size: 24px;
}

.success-bottom span:nth-child(2) {
    display: inline-block;
    margin-left: 28px;
    line-height: 28px;
}

.youwant {
    width: 124px;
    height: 36px;
    background-color: #fff;
    z-index: 2;
    padding-top: 5px;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hr-use {
    width: 100%;
    height: 1px;
    border-top: 1px solid #c8c8c8;
    position: absolute;
    top: 18px;
}

其实思路就是让一个Div绝对定位，设置成中线；让另外的内容固定宽度，margin-left: auto; margin-right: auto;  最后再调整下位置就可以达到内容在中间，且在横线中间的效果。

 

转载于:https://www.cnblogs.com/ChickenTang/p/5808063.html