CSS 居中之美

一丝
2013-12-28 于南京

巴黎戴高乐广场

关于我

一丝：

阿里巴巴前端工程师

「前端快爆」作者

你想到了什么？

margin: auto?

常见居中方法

水平居中


.demo{
    text-align: center; 

    margin: auto; 

    position: absolute; 
    left: 50%; 
    margin-left: -?px; 
}

常见居中方法

垂直居中


.demo{
    height: 30px;
    line-height: 30px;

    display: table-cell; 
    vertical-align: middle;

    position: absolute; 
    top: 50%; 
    margin-top: -?px;
}

还有其他方法吗？

CSS3？

CSS3 居中

display: flex

CSS 居中未来

CSS基础理论

盒模型(box-sizing)

  • border-box
  • content-box
  • pading-box

不同盒模型对应的设计思路是什么？

CSS基础理论

盒模型(box-sizing)

前端基础理论

定位体系

  1. 普通流(Normal flow)
  2. 浮动(Floats)
  3. 绝对定位(Absolute positioning)
    • position: absolute;
    • position: fixed;

前端基础理念

前端的本质工作是「还原设计」

而CSS是设计意图的最终实现

  1. 三层分离（内容，表现，行为）
  2. 优雅降级(Graceful Degradation),1994
  3. 渐进增强(Progressive Enhancement),2003

居中设计实例

如何更好的还原设计？

居中设计实例

图文混排

居中设计实例

未知高度图片绝对居中

居中设计实例

水平分割线

居中设计实例

绝对定位元素居中

居中设计实例

绝对定位 + transform

误区

  1. 滥用 float 布局
  2. 使用空标签闭合浮动
  3. 用 <br> 控制垂直间距
  4. 用 &nbsp; 控制字间距(两端对齐布局等)
  5. 直接在标签上用 style 属性写样式
  6. 随意甚至使用拼音给 Class，ID 命名
  7. 多 Class 症(滥用 OOCSS)

亲~说点啥吧

Thank You ^_^

CSS 居中之美

Powered by reveal.js