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. 实现action的三种方法

    1.一个普通的类 public class testAction1 { public String execute(){ return "success"; } } 2.实现Act ...

  2. Spring-Junit4

      Spring整合Junit4测试Service 1. 加入依赖包 使用Spring的测试框架需要加入以下依赖包: JUnit 4 (官方下载:https://github.com/KentBeck ...

  3. STL中的set集合容器进行集合运算：并、交、差实例

    集合容器的集合运算:并.交.差: #include "stdafx.h" #include <iostream> #include <set> #inclu ...

  4. JavaScript 【正则表达式验证数字代码】

    可以看到 Ajax 请求多了个 x-requested-with ,可以利用它,request.getHeader("x-requested-with"); 为 null,则为传统 ...

  5. 《JavaScript 闯关记》之语句

    表达式在 JavaScript 中是短语,那么语句就是整句命令.表达式用来计算出一个值,语句用来执行以使某件事发生.从本质上看,语句定义了 JavaScript 中的主要语法,语句通常使用一或多个关键 ...

  6. DevExpress中SearchLookUpEdit用法总结

    在前一个项目中用到了DevExpress,需要搜索某一个字段,来拉取出对应的相关信息,比来比去,发现SearchLookUpEdit的用户体验更好,但自己是个不折不扣的C#和DevExpress的初学 ...

  7. makefile常用指令和常见变量。

    引用文章A:http://blog.csdn.net/liang13664759/article/details/1771246 文章介绍:非常详细的文章,讲解上都是比较基础的知识. 本文可能会持续更 ...

  8. mysql事件调度器功能

    一.前言 自MySQL5.1.6起,增加了一个非常有特色的功能–事件调度器(Event Scheduler),可以用做定时执行某些特定任务(例如:删除记录.对数据进行汇总等等),来取代原先只能由操作系 ...

  9. OpenLayers 3加载本地Google切片地图

    OpenLayers  提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...

  10. Oracle EBS-SQL (OM-6):打开订单.sql

    /*打开头*/ update oe_order_headers_all t set t.flow_status_code = 'BOOKED', t.open_flag = 'Y' where t.o ...