文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 相关分类
    2. 2.2. Absolute-Center
    3. 2.3. Transform
    4. 2.4. Negative Margin(deprecated)
    5. 2.5. Table Cell
    6. 2.6. Inline-Block vertical-align
    7. 2.7. Flex Box
    8. 2.8. display: -webkit-box
    9. 2.9. Conclusion
  3. 3. Reference

Defined

写了比较久的居中样式, 做个总结看看以后可以用什么. 目的上来说不关注IE兼容性!

Main()

相关分类

  • container: inline/block;
  • container-size: known/unknown;
  • child: inline/block;
  • xORy: horizon/vertical/all

Absolute-Center

利用 position:absolute; 的绝对居中.

Constraint: 父级对象relative; 高度必须声明 | 被内容撑起高度;
Code:

1
2
3
4
5
6
7
8
.absolute-center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Attention: 一旦position设置为absolute之后, 该tag会变成block element.
Advantages: IE8+; 自适应
Caveats: 防止内容过多导致的溢出需要设置overflow

How it works:
利用的是margin:auto;在标准中的相关制定概念的使用.以下是原文,horizonal-center同理

w3.org
If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values. AKA: center the block vertically

一旦满足上面条件, margin:auto;中的top和bottom会变成同一个值而不是0, 所以能做到vertical-center.

Transform:
如果需要一边靠齐例如Right Align, 相关代码则改为: left: auto;&&right: 0;

Transform

Constraint: 这个方法我用的比较多, 不过transform本身仅支持IE9+ PS: 突然发现我原来从caniuse那边查的都是完全适配状态, IE9需要添加-ms-
Code:

1
2
3
4
5
6
7
8
9
10
11
.transform-center {
position: absolute;
/* OR position: relative; */
width: 50%;
margin: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

这个原理可以看一下box-model和下面的negtive margin概念一样

Negative Margin(deprecated)

Constraint: 固定size; 即无法响应式
Advantages: 唯一优点差不多就是兼容IE6+了吧
Code:

1
2
3
4
5
6
7
8
9
10
.negative-margin-container {
width: 300px;
height: 300px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -170px; /*150 + 20*/
margin-left: -170px;
}

Table Cell

Constraint: vertical-align: middle; 仅用于inlinetable-cell box样式
Advantages: 兼容性

1
2
3
4
5
6
7
8
9
10
11
.table-container {
display: table;
}
.table-container .table-cell {
display: table-cell;
vertical-align: middle;
}
.table-container .table-cell .inner-content{
width: 50%;
margin: 0 auto;
}

Inline-Block vertical-align

原理和table cell一样, 不过利用伪元素::after创建了一个ghost element保证高度可以参考.
因为hack程度比较高而且好像也没有其他的优点??

Flex Box

这个就不讲了, 过几天开始写项目一起放进来写.
贴一张segmentfault上的一张图
flex-box

display: -webkit-box

On draft, should be deprecated in few days.
link | MDN

Conclusion

依据IE兼容性递增选择: Absolute Center(IE8-10) => transform(IE9+) => Flex(IE9+)
其他的算是legacy了

Reference

absolute centering - shshaw
manual - center code
center-in-the-unknown - csstricks

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 相关分类
    2. 2.2. Absolute-Center
    3. 2.3. Transform
    4. 2.4. Negative Margin(deprecated)
    5. 2.5. Table Cell
    6. 2.6. Inline-Block vertical-align
    7. 2.7. Flex Box
    8. 2.8. display: -webkit-box
    9. 2.9. Conclusion
  3. 3. Reference