CSS居中之美

关于居中，你会想到什么？

div{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

display:flex;

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <div class="flex">
    <div class="flex-item">flex item</div>
  </div>
</body>
</html>

.flex{
  display: -webit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  border: 1px solid;
  height: 200px;
}

.flex-item{
  border: 1px solid blue;
  height: 50px;
}

水平居中

P {alignment: center;}

垂直居中

P {child-align: middle;}

position方法

p{position:center;}

CSS理论基础

盒模型(box-sizing)

border-box/content-box/padding-box

定位体系
　　普通流(Normal flow)
　　　　块级格式化上下文(Block formatting contexts)
　　　　行内格式化上下文(Inline formatting contexts)
　　position: relative;
　　浮动(Floats)
　　　　绝对定位(Absolute positioning)
　　　　　　position: absolute;
　　　　　　position: fixed;

前端的本质工作是「还原设计」
而CSS是设计意图的最终实现

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

误区

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