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

     
        
      
        
      
            
                   
       你可能还想要        
      
        
          
     

 

.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;  最后再调整下位置就可以达到内容在中间，且在横线中间的效果。