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. svn之——linux下清除svn的用户名和密码

    问题:之前用的svn账号权限不够,需要使用别的账号,所以提出需求——怎么使用新的svn账号进行操作 方法一: linux下删除~/.subversion/auth即可清除之前的用户名和密码:rm -r ...

  2. java转换字符串编码格式 (解码错误,重新解码)

    字符集概念:规定了某个文字对应的二进制数字存放方式(编码)和某串二进制数值代表了哪个文字(解码)的转换关系. 我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流. ...

  3. JFreeChart多坐标轴曲线图

    jar包:jcommon-1.0.23.jarjfreechart-1.0.19.jar maven配置: <dependency> <groupId>jfree</gr ...

  4. IOS 使用dispatch_once 创建单例

    + (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...

  5. 采用标准c进行目录文件遍历

    图像处理的时候经常需要对一个目录的所有图像进行处理,遍历文件得c代码: 在windows中需要使用到宽字符. 另外,可以使用opencv封装的目录访问操作,下次给出. // DirTraverse.c ...

  6. Expected authority at index 7: hdfs://

    hadoop版本:1.0.4 今天在跑TestForest的时候,居然出现了这个问题: Exception in thread "main" java.lang.IllegalAr ...

  7. Android应用程序组件Content Provider在应用程序之间共享数据的原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...

  8. Android使用NumberPicker控件实现选择城市，生日

    本人菜鸟一枚,第一次写技术博客,有点小紧张,加上代码很乱,求不喷. 先放效果图: 界面就这么简单. 然后放上代码: package com.example.dialog; import java.ut ...

  9. 关于OC中的几种代码延迟执行方式

    第一种: [UIView animateWithDuration:3 delay:3 options:1 animations:^{         self.btn.transform = CGAf ...

  10. windows8开发学习笔记

    XAML行列定义 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...