css 的居中有水平居中和垂直居中，这两种居中又分为行内元素居中和块级元素居中，不同的居中用不同方法。

水平居中

1、行内元素水平居中（文本，图片）

给父层设置 text-align:center; 可以实现行内元素水平居中。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    .center{text-align:center;}

    </style>

</head>

<body>

    <div class="center">

        <a href="http://www.google.com.hk/">谷歌搜索</a><br/><br/>

        <img src="cat.jpg" width="248" height="162" alt=""/>

    </div>

</body>

</html>

2、确定宽度块级元素水平居中

确定宽度的块级元素水平居中，常用的有 margin:0 auto; 相信很多开发人员都用的是这个，不过本人认为还有更好的写法：margin-left:auto;margin-right:auto; 因为 margin-top 和 margin-bottom 在重置 css 时就已经写了为 0 了。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    .center{width:100px;height:100px;margin-left:auto;margin-right:auto;background:green;}

    </style>

</head>

<body>

    <div class="center"></div>

</body>

</html>

3、不确定宽度的块级元素水平居中

不确定宽度的块级元素有三种方法实现。

方法一：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    ul{list-style:none;}

    table{margin-left:auto;margin-right:auto;}

    .demo li{float:left;display:inline;margin-right:5px;}

    .demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}

    .demo a:hover{background:white;color:#316ac5;}

    </style>

</head>

<body>

    <table>

        <tbody>

            <tr>

                <td>

                    <ul class="demo">

                        <li><a href="#">1</a></li>

                    </ul>

                </td>

            </tr>

        </tbody>

    </table>

    <table>

        <tbody>

            <tr>

                <td>

                    <ul class="demo">

                        <li><a href="#">1</a></li>

                        <li><a href="#">2</a></li>

                        <li><a href="#">3</a></li>

                    </ul>

                </td>

            </tr>

        </tbody>

    </table>

    <table>

        <tbody>

            <tr>

                <td>

                    <ul class="demo">

                        <li><a href="#">1</a></li>

                        <li><a href="#">2</a></li>

                        <li><a href="#">3</a></li>

                        <li><a href="#">4</a></li>

                        <li><a href="#">5</a></li>

                    </ul>

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素，如果不给它设定宽度的话，会由内部元素的宽度“撑开”，但即使不设定它的宽度，仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。

这种方法很巧妙，但是增加了无语义标签，加深了标签的嵌套层数。

方法二：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    ul{list-style:none;}

    .wrapper{width:500px;height:100px;background:black;}

    .demo{text-align:center;padding:5px;}

    .demo li{display:inline;}

    .demo a{padding:2px 6px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}

    .demo a:hover{background:white;color:#316ac5;}

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="demo">

            <li><a href="#">1</a></li>

        </ul>

        <ul class="demo">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

        </ul>

        <ul class="demo">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#">5</a></li>

        </ul>

    </div>

</body>

</html>

方法二是改变元素的 display 值，使块级元素变成行内元素，然后使用 text-align:center 使其居中。相对于方法一，它不用增加无语义标签，简化了标签的嵌套深度，但它也存在一定的问题：它将块级元素变成了行内元素，这样就失去了一些块级元素的功能，比如设置宽度，高度。

方法三：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    ul{list-style:none;}

    .wrapper{width:500px;height:100px;background:black;}

    .demo{clear:both;padding-top:5px;float:left;position:relative;left:50%;}

    .demo li{display:inline;float:left;margin-right:5px;position:relative;left:-50%;}

    .demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}

    .demo a:hover{background:white;color:#316ac5;}

    </style>

</head>

<body>

    <div class="wrapper">

        <ul class="demo">

            <li><a href="#">1</a></li>

        </ul>

        <ul class="demo">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

        </ul>

        <ul class="demo">

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#">5</a></li>

        </ul>

    </div>

</body>

</html>

方法三通过给父层设置浮动和相对定位以及 left:50%，子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能，而且不会添加无语义标签，不增加嵌套深度，但是设置了相对定位，会带来一定的副作用。

这三种方法各有优缺点，具体使用哪种方法可以视具体情况而定。

垂直居中

1、父层高度不确定的垂直居中

通过给父层设置相同的上下内边距实现。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .demo{width:500px;color:white;margin-bottom:10px;padding-top:20px;padding-bottom:20px;background:black;}

    .content{width:200px;height:50px;background:red;}

    </style>

</head>

<body>

    <div class="demo">hello world</div>

    <div class="demo"><img src="cat.jpg" width="248" height="162" alt=""/></div>

    <div class="demo"><div class="content"></div></div>

</body>

</html>

2、父层高度确定的单行文本垂直居中

通过给父层设置行高来实现，行高和父层高度相同。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .demo{width:500px;color:white;background:black;height:100px;line-height:100px;}

    </style>

</head>

<body>

    <div class="demo">hello world</div>

</body>

</html>

3、父层高度确定的多行文本、图片、块级元素垂直居中

方法一：

说到垂直居中，css 中有个用于垂直居中的属性 vertical-align，但只有在父层为 td 或者 th 时，这个属性才会生效，对于其他块级元素，例如 div、p 等，默认情况是不支持的。在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，但 ie6,7 并不支持，所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .wrapper{background:black;width:500px;color:white;height:100px;}

    .demo{width:200px;background:red;height:50px;}

    </style>

</head>

<body>

    <table>

        <tr>

            <td class="wrapper">

                hellow world<br/>

                hellow world<br/>

                hellow world<br/>

            </td>

        </tr>

    </table>

    <table>

        <tr>

            <td class="wrapper">

                <img src="cat.jpg" alt=""/>

            </td>

        </tr>

    </table>

    <table>

        <tr>

            <td class="wrapper">

                <div class="demo"></div>

            </td>

        </tr>

    </table>

</body>

</html>

table 可以很好的实现垂直居中效果，但是它添加了无语义标签，增加了嵌套深度。

方法二：

对支持 display:table-cell 的 ie8 和 firefox 用 display:table-cell 和 vertical-align:middle 来实现居中，对不支持 display:table-cell 的 ie6 和 ie7 使用 hack 写法。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    *{margin:0;padding:0;}

    .mb{margin-bottom:10px;}

    .wrapper{background:black;width:500px;color:white;height:100px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;}

    .demo{width:200px;background:red;height:50px;}

    .vam{*position:absolute;*top:50%;}

    .va{*position:relative;*top:-50%;}

    </style>

</head>

<body>

    <div class="mb10">

        <div class="wrapper">

            <div class="vam">

                <div class="va">

                    hellow world<br/>

                    hellow world<br/>

                    hellow world

                </div>

            </div>

        </div>

    </div>

    <div class="mb10">

        <div class="wrapper">

            <div class="vam">

                <img src="cat.jpg" alt=""/>

            </div>

        </div>

    </div>

    <div class="mb10">

        <div class="wrapper">

            <div class="vam">

                <div class="va demo"></div>

            </div>

        </div>

    </div>

</body>

</html>

利用 hack 技术区别对待 firefox、ie8 和 ie6、ie7，在不支持 display:table-cell 的 ie6 和 ie7 下，通过给父子两层元素分别设置 top:50% 和 top:-50% 来实现居中。这种方法的好处是没有增加额外的标签，但缺点也很明显，一方面它使用了 hack，不利于维护，另一方面，它设置了 position:relative 和 position:absolute，带来了副作用。

谈谈 css 的各种居中——读编写高质量代码有感的更多相关文章

  1. [已读]编写高质量代码--Web前端开发修炼之道

    我觉得还蛮实用的一本,推荐看看,主要涉及到这些: 标签语义化.css模块化. css的一些东西,比如haslayout 文档流,还有如何实现水平.垂直居中. js代码组织与js分层.js压缩 编码规范 ...

  2. [已读]编写高质量代码 改善JavaScript程序的188个建议

    吐槽一万遍,买的最后悔的一本,没有之一,大量篇幅抄袭<高性能javascript>,我记得还有部分抄袭<javascript精粹>,<javascript模式>有没 ...

  3. 编写高质量代码——html、css、javascript

    [编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网 ...

  4. 《编写高质量代码－－Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  5. 每周一书-编写高质量代码：改善C程序代码的125个建议

    首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10 ...

  6. 编写高质量代码改善java程序的151个建议——导航开篇

    2014-05-16 09:08 by Jeff Li 前言 系列文章:[传送门] 下个星期度过这几天的奋战,会抓紧java的进阶学习.听过一句话,大哥说过,你一个月前的代码去看下,慘不忍睹是吧.确实 ...

  7. 编写高质量代码:改善Java程序的151个建议 --[117~128]

    编写高质量代码:改善Java程序的151个建议 --[117~128] Thread 不推荐覆写start方法 先看下Thread源码: public synchronized void start( ...

  8. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  9. 编写高质量代码改善C#程序的157个建议——建议150：使用匿名方法、Lambda表达式代替方法

    建议150:使用匿名方法.Lambda表达式代替方法 方法体如果过小(如小于3行),专门为此定义一个方法就会显得过于繁琐.比如: static void SampeMethod() { List< ...

随机推荐

  1. 网易云课堂_C++开发入门到精通_章节7:模板

    课时35类模板 类模板 创建类模板的实例 class Name<类型参数表>object; 类模板与模板类的区别 类模板是模板的定义,不是一个实实在在的类,定义中用到通用类型参数 模板类是 ...

  2. Android应用程序组件Content Provider的启动过程源代码分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6963418 通过前面的学习,我们知道在Andr ...

  3. 擦肩而过的那块牌--记ACM_ICPC西安赛区现场赛

    说了那么多次orz,这次是真的orz了.去了西安打区域赛,也想过会打铁.但当终于那一刻确定打铁了之后.心里还是非常不开心的,颁奖的时候思考熊那家伙嚣张的举起来手中那个金杯,说实话闪到我眼了(太亮了QA ...

  4. squid服务搭建

    Squid配置1. 什么是squidsquid可以做代理也可以做缓存squid缓存不仅可以节省宝贵的带宽资源,也可以大大降低服务器的I/O.  squid不仅可以做正向代理,又可以做反向代理. 正向代 ...

  5. 关于JavaScript 原型的理解

    原型的含义是指:如果构造器有个原型对象A,则由该构造器创建的实例(Object Instance)都必然复制于A.““在JavaScript中,对象实例(Object Instance)并没有原型,而 ...

  6. Javascript进阶篇——(流程控制语句)笔记整理

    做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句.语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公 ...

  7. js打印数据类型

    console.log({}.toString.call(123))--- [object Number].... [object String] [object Undefined] [object ...

  8. windows笔记

    三星(SAMSUNG)905S3G-K07 安装Windows 7 过程分享 http://www.cnblogs.com/scue/p/4100743.html 打开方式没有excel http:/ ...

  9. Oracle 中的Userenv（）

    1.USEREVN() 返回当前用户环境的信息,opt可以是:ENTRYID,SESSIONID,TERMINAL,ISDBA,LABLE,LANGUAGE,CLIENT_INFO,LANG,VSIZ ...

  10. 新浪微博iOS示例,登录,获取个人信息

    1.导入第三方库和系统框架