-
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;控制元素内部做自适应。
