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

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居中之美的更多相关文章

  1. css水平垂直居中的几个方法和技巧/居中之美

    水平居中设置-行内元素     我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-ali ...

  2. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  8. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  9. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

随机推荐

  1. Codeforces Beta Round #7 D. Palindrome Degree manacher算法+dp

    题目链接: http://codeforces.com/problemset/problem/7/D D. Palindrome Degree time limit per test1 secondm ...

  2. alpha冲6

    队名:日不落战队 安琪(队长) 今天完成的任务 回收站前端界面. 明天的计划 查看个人信息界面. 还剩下的任务 信息修改前端界面. 设置界面. 遇到的困难 模拟机莫名其妙就崩了,调试了很久,后在队友的 ...

  3. NULL指针引起的一个linux内核漏洞

    NULL指针一般都是应用于有效性检测的,其实这里面有一个约定俗成的规则,就是说无效指针并不一定是 NULL,只是为了简单起见,规则约定只要指针无效了就将之设置为NULL,结果就是NULL这个指针被用来 ...

  4. 在Wmware虚拟机上如何检查是否CPU支持虚拟化 和 加载kvm模块

    在vm虚拟机中 修改 虚拟机==>设置==> 处理器==>虚拟化引擎(选第二项:虚拟化Intel VT-x/EPT 或 AMD-V/RVI(V) )     # vmx或svm :表 ...

  5. PXE推一半失败，HP服务器、曙光服务器删除数据

    一.#设备:惠普HP DL380 Gen9 PXE安装失败,系统尝试从硬盘启动 需要将安装未完整的系统数据删除,以便正常装机 从控制台重启设备 重启后,HP在此界面选择Intelligent Prov ...

  6. mysql中用户和权限

    用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中——不管哪个数据库的用户,都存储在这里. 表初始内容如下: 创建用户: 形式: create   ...

  7. 使用ResourceBundle 类读取 src 下的 xxx.properties 文件

    之前要读取 src 下的 .properties 文件都是使用的类加载器,加载类路径下的资源文件当做一个流来处理,load 到一个 Properties 对象上. jdbc.properties 代码 ...

  8. Linux的cut命令

    cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut  [-bn] [file] 或 cut ...

  9. .net MVC中使用angularJs刷新页面数据列表

    使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下: @{ Layout = null; } <!DOCTYPE ht ...

  10. FZU2127_养鸡场

    题目的意思为要你求出满足三边范围条件且周长为n的三角形的数目. 其实做法是直接枚举最短边,然后就可以知道第二条边的取值范围,同时根据给定的范围缩小范围. 同时根据第二条边的范围推出第三条边的范围,再次 ...