参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235

1.行内元素水平居中text-align:center
对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中，可对元素或者父元素使用text-align:center

2.定宽块级元素水平居中margin: 0 auto;

 .container{

          width:500px; /* 元素设置定宽*/

          height: 200px;

          margin:0 auto;/*margin-left和margin-right设置为auto*/

          background-color: aquamarine;

       }

3.使用表格垂直水平居中

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格居中</title>

    <style type="text/css" >

        body{

            padding:0;

            margin:0;

        }

        .parent{

            vertical-align: middle;

            text-align: center;

            width: 200px;

            height:200px;

            margin:0 auto;

            background-color: pink;

        }

        .child{

            display: inline-block;

            width: 100px;

            height: 100px;

            background-color: deeppink;

        }

    </style>

</head>

<body>

<table >

    <tr>

        <td class="parent">

            <div class="child"></div>

        </td>

    </tr>

</table>

</body>

</html>

4.使用display:table;margin:0 auto;水平居中

 .child{

          display: table;

          width: 100px;

          height: 100px;

          margin:0 auto;

          background-color: deeppink;

      }

5.使用display:table-cell垂直水平居中

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格的居中特性。但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div居中</title>

    <style type="text/css" >

        body{

            padding:0;

            margin:0;

        }

      .parent{

          display:table-cell;

          vertical-align: middle;

          text-align: center;

          width: 200px;

          height:200px;

          margin:0 auto;

          background-color: pink;

       }

      .child{

          display: inline-block;

          width: 100px;

          height: 100px;

          background-color: deeppink;

      }

    </style>

</head>

<body>

<div class="parent">

    <div class="child"></div>

</div>

</body>

</html>

效果为

6.单行或多行文本的垂直居中

父元素高度确定的情况下，

单行文本设置父元素的height和line-height一致即可；

多行文本在使用vertical-align:middle的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

7.绝对定位垂直水平居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

垂直水平居中

.parent{

            position:relative;/*父元素相对定位*/

            width: 500px;

            height:300px;

            background-color: pink;

        }

        .child{

            position: absolute;

            left:50%;

            top:50%;

            width: 300px;

            height: 200px;

            margin: -100px 0 0 -150px;/*margin-left为child宽度的一半，margin-top为child高度的一半*/

            background-color: deeppink;

        }

8.另一种绝对定位居中

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

 .parent{

            position:relative;/*父元素相对定位*/

            width: 500px;

            height:300px;

            background-color: pink;

        }

        .child{

            position: absolute;

            width: 300px;/*宽高需要固定*/

            height: 200px;

            left:;

            right:;/*left和right必须配对出现来控制水平方向，top、bottom同理*/

            top:;

            bottom:;

            margin:auto;/*这句也是需要的，0 auto水平居中，auto 0 垂直居中*/

            background-color: deeppink;

        }

 9.flex布局垂直水平居中

flex布局语法和实例参考阮一峰的博文：Flex 布局教程：语法篇、Flex 布局教程：实例篇

.parent{

            display:flex;

            justify-content:center;

            align-items:center;

            width: 500px;

            height:300px;

            background-color: pink;

        }

.child{

            width: 300px;

            height: 200px;

            background-color: deeppink;

        }

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

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

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

  2. CSS布局居中

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

  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. 使用Highcharts实现图表展示

    本篇随笔记录的是本人2011年做广州地铁协同办公项目时,图表需求的解决方案.(Demo中只是虚拟的测试数据) 关键技术点: 使用Highcharts实现图表展示: 另外使用Highslide弹窗.使用 ...

  2. ubuntu 安装node.js + express + mongodb

    转载自http://my.oschina.net/reg/blog/289536 Ctrl + Alt + T,打开终端,输入以下命令安装: sudo apt-get install nodejs 安 ...

  3. Into concurrent LRU caching once again

    But this time, with a more product oriented point of view, instead of researching. http://openmymind ...

  4. CentOS 6.4 快速安装Nginx笔记

    CentOS 6.4 快速安装Nginx笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/details/9860 ...

  5. 2014 网选 5024 Wang Xifeng's Little Plot

    题意:从任意一个任意一个可走的点开始找一个最长的路,这条路如果有转弯的话, 那么必须是 90度,或者没有转弯! 思路: 首先用dfs将所有可走点开始的 8 个方向上的线段的最长长度求出来 ! step ...

  6. VC2013的一个bug

    前段时间在尝试使用一个C++的GUI库nana.这个库最大的特点在于使用现代C++风格去编写GUI程序,而不需要使用大量的比较丑陋的代码(如MFC中的各种宏),或者其它的非C++元素.这是一个比较新的 ...

  7. selenium webdriver (python) 第一版PDF

    前言 如果你是一位有python语言基础的同学,又想通过python+ selenium去实施自动化,那么你非常幸运的找到了这份文档,我也非常荣幸能为你的自动化学习之路带来一丝帮助. 其实,我在sel ...

  8. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  9. js-数据类型

    js中有5种数据类型:Undefined.Null.Boolean.Number和String.还有一种复杂的数据类型Object,Object本质是一组无序的名值对组成的. 一.数据类型 1.und ...

  10. 转载：第二弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿！每日更新！

    今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程.我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志.我已经做好了最坏的准备,就算放弃这份 ...