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. PHP 表单验证 - 验证 E-mail 和 URL

    ----------------------------------------------------------------------------- 本节展示如何验证名字.电邮和 URL. -- ...

  2. Radar Installation(贪心，可以转化为今年暑假不ac类型)

    Radar Installation Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) ...

  3. lua select

    可以用这样的方法产生类似foreach的功能: function printargs(...) local num_args = select("#", ...) for i = ...

  4. Android应用程序与SurfaceFlinger服务的关系概述和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7846923 SurfaceFlinger服务负 ...

  5. 【二分查找+优化O（n）】【续UVA1121】Subsequence

    之前的二分答案做法 http://blog.csdn.net/zy691357966/article/details/40212215 二分查找做法: 我们首先试试只枚举终点.对于终点j,我们的目标是 ...

  6. Jquery 工具类函数

    1.$.browser  获取当前浏览器的名称和版本信息 $.browser.chrome  获取chrome浏览器 $.browser.mozilla  获取火狐浏览器 $.browser.msie ...

  7. Eclipse编译Arduino程序不能使用串口函数Serial.begin解决办法

    在Arduino官方的编译器当中Serial.begin(9600);初始化语句是可以直接使用的,而到Eclipse当中,同样的语句却不能用了.会出现下面的问题: 显然,这是Eclipse没有找到Se ...

  8. 三维扫描 FZU 1063

    Description 工业和医学上经常要用到一种诊断技术——核磁共振成像(Magnetic Resonance Imagers).利用该技术可以对三维物体(例如大脑)进行扫描.扫描的结果用一个三维的 ...

  9. iBatis核心框架浅析

    1.1 iBatis配置与运行 1.dal 层的dao接口实现类通常会继承SqlMapClientDaoSupport.spring容器在初始化一个dao bean实例时,通常会注入两块信息DataS ...

  10. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...