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

 

What is 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来解决：

    

11111111111111111111

#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 居中方案

   

asdasdfasdfasdfasdfasdfasdfasdffsd

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