-
margin: 0 auto;一列水平居中
<div class="one-column-horizontal-center-1"></div>
.one-column-horizontal-center-1{
background:#ccc;
height:50px;
margin:0 auto; /* core */
width:200px;
}
- 該元素一定不能浮動，否則無效。
- 內聯塊元素和內聯元素設置居中要變成塊元素才能使用margin:0 auto;
- margin:0 auto; 是讓div居中的，不是讓文字居中的。
- 父級設置
text-align: center;,子元素設置display:inline-block;。
-
text-align屬性可以有效作用于inline/inline-block水平的元素，對塊級元素不起作用
<div class="one-column-horizontal-center-2-wrap">
<div class="one-column-horizontal-center-2"></div>
<div class="one-column-horizontal-center-2"></div>
</div>
.one-column-horizontal-center-2-wrap{
font-size:0;
text-align:center; /* core*/
}
.one-column-horizontal-center-2{
background:red;
display:inline-block; /* core*/
height:50px;
width:200px;
}
這里添加font-size:0;主要是為了解決inline-block引發的一個Bug.如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像個圖片一樣。例如，兩個不在一行的div標簽，形成的兩個元素之間就會有間隙，如下圖所示：
inline-block引入的空格
添加
font-size:0;空格符本質上就是個字符，與a,b,c,d這些字符是個同一個屬性的東西，只是他是空格，透明的看不見而已（但可以選中）。所以，只要我們使用讓文字寬度為0的那些方法，不就可以解決inline-block元素間換行符間隙的問題啦！
Bug解除后
3.float+relative+helper+left50%+right50%
<div class="main">
<div class="parent">
<div class="div01"></div>
</div>
</div>
.main{
overflow: hidden;
}
.parent{
float: left;
left: 50%;
position: relative;
}
.div01{
position:relative;
right:50%;
background:red;
height:50px;
width:200px;
}
需要注意浮動元素的寬度是由它的內容決定的。
relative(absolute)+left50%+負margin
<div class="main"></div>
.main{
position:relative;
left:50%;
margin-left: -25px;
background:red;
height:50px;
width:50px;
}
這里position:relative;left:50%;會讓元素的最左邊緣處于父元素的中間位置，margin-left: -25px;移動元素寬度的一半，讓整個元素位于中間位置。
缺陷：這種方式需要已知寬度。
-webkit-box-orient+-webkit-box-pack+-webkit-box
<div class="main">
<div class="div01"></div>
</div>
.main{
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -webkit-box;
}
.div01{
background:red;
height:50px;
width:50px;
}
-webkit-fit-content
<div class="main">
<div class="div01"></div>
</div>
.main{
margin: 0 auto;
width:-webkit-fit-content; /* core*/
}
.div01{
background:red;
height:50px;
width:50px;
}
margin:0 auto;控制父元素居中，width:-webkit-fit-content;控制元素內部做自適應。
