码迷,mamicode.com
首页 > Web开发 > 详细

CSS居中之美

时间:2015-12-03 00:20:13      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

关于居中,你会想到什么?

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> 控制垂直间距
用 &nbsp; 控制字间距(两端对齐布局等)
直接在标签上用 style 属性写样式
随意甚至使用拼音给 Class,ID 命名
多 Class 症(滥用 OOCSS)

 

CSS居中之美

标签:

原文地址:http://www.cnblogs.com/zcynine/p/5014497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!