关于居中，你会想到什么？
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)