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. 【转】【漫画解读】HDFS存储原理

    根据Maneesh Varshney的漫画改编,以简洁易懂的漫画形式讲解HDFS存储机制与运行原理. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下: Client:客户端,系统使用者,调用 ...

  2. hdu 1595 find the longest of the shortest(dijkstra)

    Problem Description Marica is very angry with Mirko because he found a new girlfriend and she seeks ...

  3. Nginx PHP MySql 编译安装

    以CentOS5.6为平台编译安装.确保系统已经安装gcc/gcc-c++编译器! 1.Nginx-1.0.14 2.PHP-5.3.10 3.MySql-5.1.61 安装相关依赖开发库: auto ...

  4. C++ 採集音频流(PCM裸流)实现录音功能

    与上一篇的"C++ 播放音频流(PCM裸流)" 点击打开链接 相相应,本篇是关于用C++实现录音功能的.相同是直接建一个win32控制台程序然后将代码拷过去改个文件名称就能够用,也 ...

  5. html标签之meta标签

    1  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   ...

  6. session进程和服务

    session如果是存在进程内的话,当进程重启,session数据就会丢失. 所以就找到了个办法,不吧session放在进程内,而是放在服务器上.这样子只要服务器不重启,session数据就不会丢失. ...

  7. myeclipse内存不足有关问题

    myeclipse内存不足有关问题 myeclipse内存不足问题 使用myeclipse8.5出现如下问题:MyEclipse has detected that less than 5% of t ...

  8. poj 3744 矩阵 高斯消元

    着实被批评了一下,自己的数论确实太烂了. 题意:一条路上,有n个炸弹,给出每个炸弹的位置,一次走一步的概率是p,走两步的概率是1-p.求安全走完的概率. 定义dp[i] = dp[i-1]*p + d ...

  9. java初学者必看经典

    配置java环境变量: JAVA_HOME:配置JDK的目录 CLASSPATH:指定到哪里去找运行时需要用到的类代码(字节码) PATH:指定可执行程序的位置 LINUX系统(在" .ba ...

  10. Win7 64位 php+Apache+mysql 配置

    注明:此文转载至 http://www.cnblogs.com/isyouth/p/3778045.html 一 :准备阶段 1:php php下载链接:http://windows.php.net/ ...