css未知宽度水平居中的几种解决方案

1.子元素

  div{text-align:center}

  p{display:inline-block}

2.淘宝分页：

  div{position:relative; left:50%; float:left;}
  p{position:relative; left:-50%;}

3.利用diplay:table来解决：

<div id="box">
     <span><div id="inner">11111111111111111111</div> </span>
</div>

#box{width:100%;height:100%; display:table;text-align:center;}
#box span{width:100%;display:table-cell; vertical-align:middle;}
#inner{display:inline-block;width:200px; border:1px solid #000;}

4.高端的css3 flex-box 居中方案

<div class="parent">
    <div class="test">asdasdfasdfasdfasdfasdfasdfasdffsd</div>
</div>

.parent{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box;  -webkit-box-align: center;-webkit-box-pack: center;}

.test{-webkit-box-flex: 0;background: #CCC;}

原文链接：https://blog.csdn.net/shengxiaokui/article/details/8508208