1、把margin设置为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

代码：

<style type="text/css">

    body{

        margin: 0;

        padding: 0;

    }

        #div1{

            background-color: red;

            width: 150px;

            height: 150px;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            margin-left: auto;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

2、效果图同上

这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

代码：

<style type="text/css">

    body{

        margin: 0;

        padding: 0;

    }

        #div1{

            background-color: red;

            width: 150px;

            height: 150px;

            text-align: center;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

3、使用line-height让单行的文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

4、使用表格：table

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。

5、使用display:table-cell来居中

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：

但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

代码：

<style type="text/css">

    body{

        margin: 0;

        padding: 0;

    }

        #div1{

            border: 1px dashed red;

            width: 150px;

            height: 150px;

            display: table-cell;

            /*控制水平居中*/

            text-align: center;

            /*控制垂直居中*/

            vertical-align: middle;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            display: inline-block;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

那面所说的都是很基础的方法，自然不能称之为奇淫巧计，下面就来说一些需要使用一些技巧的居中方法。

6、使用绝对定位来进行居中

效果图1：

代码1：

<style type="text/css">

    body{

        margin: 0;

        padding: 0;

    }

        #div1{

            border: 2px dashed red;

            width: 150px;

            height: 150px;

            position: relative;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            position: absolute;

            /**

             * top、和left的计算问题

             * (152-70)/2=35

             */

            top: 41px;

            left: 41px;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

效果图2：

代码2：

<style type="text/css">

    body{

        margin: 0;

        padding: 0;

    }

        #div1{

            border: 2px dashed red;

            width: 110px;

            height: 110px;

            position: relative;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            position: absolute;

            /**

             * margin-top、和margin-left的计算问题

             * -70/2=-35

             */

            left: 50%;

            top: 50%;

            margin-left: -35px;　　//子元素宽度负的一半

            margin-top: -35px;　　 //子元素高度负的一半

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。

7、另一种使用绝对定位来居中的方法

此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
下面用一段代码来了解这种方法：

效果图

代码:

<style type="text/css">

        body{

            margin: 0;

            padding: 0;

        }

        #div1{

            border: 2px dashed red;

            width: 110px;

            height: 110px;

            position: relative;

        }

        #div2{

            background-color: black;

            width: 70px;

            height: 70px;

            position: absolute;

            /**

             * 此方法只适用高度宽度固定的

             */

            /*left、right必须配对出现控制水平方向*/

            left: 0;

            right: 0;

            /*top、bottom必须配对出现控制垂直方向*/

            top: 0;

            bottom: 0;

            /*下面这句也是必不可少的*/

            margin: auto;

        }

    </style>

</head>

<body>

    <div id="div1" class="classname">

        <div id="div2" class="classname">

        </div>

    </div>

</body>

这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。

8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法，并且我们不需要知道需要居中的元素的宽度。

浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。

看下代码：

http://www.cnblogs.com/2050/p/3392803.html

CSS布局居中的更多相关文章

  1. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

  2. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  3. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  4. CSS 布局实例系列（一）总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  5. css布局之居中

    CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...

  6. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  7. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  8. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  9. CSS布局（上）

    CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...

随机推荐

  1. Java Web程序设计笔记 • 【第1章 Web应用程序】

    全部章节   >>>> 本章目录 1.1 Web 应用程序 1.1.1 Web 应用程序概述 1.1.2 Web 应用程序的工作原理 1.1.3 实践练习 1.2 HTTP协议 ...

  2. 每天学一点——python变量、常量与数字类型

    python变量.常量与数字类型 常量 (一句话能概括先讲它) 严格来讲,python中除了π与N就没有不变的量 所以,在python中我们识别常量是看它是否全大写(如下图) 变量 变量,顾名思义,就 ...

  3. C# .net 环境下使用rabbitmq消息队列

    消息队列的地位越来越重要,几乎是面试的必问问题了,不会使用几种消息队列都显得尴尬,正好本文使用C#来带你认识rabbitmq消息队列 首先,我们要安装rabbitmq,当然,如果有现成的,也可以使用, ...

  4. vim 安装使用 pathogen

    目录 pathogen 是什么? 如何安装? pathogen 是什么? pathogen 一般作为 vim 新手的第一个插件,用来统一管理 vim 插件包. (官方解释)非常容易地管理你的 'run ...

  5. 物理机异常断电，linux虚拟机系统磁盘mount失败，导致无法启动; kubectl 连接失败

    虚拟机 CentOS 7 挂载文件系统失败 上周五下班前没有关闭虚拟机和物理机, 今天周一开了虚拟机之后,发现操作系统启动失败. 原因跟 这篇文章描述的一模一样. 解决操作系统的文件系统挂载的问题之后 ...

  6. spring cloud --- config 配置中心 [本地、git获取配置文件]

    spring boot      1.5.9.RELEASE spring cloud    Dalston.SR1 1.前言 spring cloud config 配置中心是什么? 为了统一管理配 ...

  7. 学习笔记--我的第一个Java程序

    我的第一个Java程序 // pubilc 表示公开的 // class 表示定义一个类 // HelloWorld 表示一个类名 public class HelloWorld { // 表示定义一 ...

  8. 设计模式-Java版-全-附代码-超生动实例

    阅读推荐:设计模式-简单篇 项目地址:https://gitee.com/zwtgit/gof23 学习网站推荐: https://refactoringguru.cn/design-patterns ...

  9. CTF-sql-order by盲注

    本文章只讨论了order by盲注,关于order by的报错等注入不在本文章讨论范围,另有文章. 让我们先来看看本文章所使用的表的内容,如下图: 接下来先了解一下order by的基础知识: ord ...

  10. day4 对偶数、偶数位的操作

    1.函数fun()的功能:从低位开始取出整形变量s中偶数位上的数,依次构成一个新数放在t中.高位仍在高位. 效果理想:但是经测试的时候出现了错误 输入987654321时,打印出来的却是18681.经 ...