css-实现元素/元素内容，垂直居中对齐

一、单行内容的垂直居中（line-height：行高方法）

只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，就可以了。

缺点：1：这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的了。
         2 ：IE中不支持<img>等的居中。

优点：适合在所有浏览器，没有足够空间时，内容不会被切掉，同时支持块级和内联元素

　　　但是这种方法对运用在小元素上是非常有用的，比如说让一个button、或者单行文本字段。

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

.middle-demo-1{

    background-color:#f1f1f1;

    height: 30px;

    line-height: 30px;

}

</style>

</head>

<body>

    <div class="middle-demo-1">

         css实现元素

    </div>

</body>

</html>

二、多行内容垂直居中，且容器高度可变：（padding:内边距方法）

也很简单，给出一致的 padding-bottom 和 padding-top 就行
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：容器不能固定高度

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

.middle-demo-1{

    padding-top: 24px;

    padding-bottom: 24px;

}

</style>

</head>

<body>

    <div class="middle-demo-2">

         css实现元素

    </div>

</body>

</html>

三、把容器当作表格单元

CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。

这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
缺点：IE低版本不支持这些属性。如果需要兼容ie6,7，需要使用Hack
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

.middle-demo-3{

display: table-cell;

height: 100px;

vertical-align: middle;

background-color: #f1f1f1;

}

</style>

</head>

<body>

    <div class="middle-demo-3">

         css实现元素

    </div>

</body>

</html>

四、已知宽高块元素的水平垂直居中

绝对定位50%，margin负值

缺点：由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。

注意：其一元素定位关系到一个相对定位参考，所以要保证元素是相对于哪个为参考坐标；

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

.middle-demo-4{

    background-color: red;

    width: 200px;/*元素的宽度*/

    height:200px;/*元素的高度*/

    position: absolute;

    left: 50%;/*配合margin-left的负值实现水平居中*/

    margin-left: -100px;/*值的大小等于元素宽度的一半*/

    top:50%;/*配合margin-top的负值实现垂直居中*/

    margin-top: -100px;/*值的大小等于元素高度的一半*/

}

</style>

</head>

<body>

    <div class="middle-demo-4">css元素本身水平垂直居中对齐，而不是其元素内容，主意区分</div>

</body>

</html>

五：全兼容的水平垂直居中实例（原文：http://demo.doyoe.com/css/alignment/），

 1:vertical-align只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框）的。

简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。

2: 换句话说，我们的垂直居中是要在每个line box中进行处理。
    而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非 该行文本的line box，所以就算定   
    vertical-laign为middle也无法让该行文本在demo容器中垂直居中。

我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo一致，文本将会在line box内垂直居中 即同样实现了在demo容器中垂直居中。本例我们使用伪对象::after来创建那个新增元素，可以设置新增元    素为不可见。

3:由于IE8以下浏览器不支持伪对象::after，于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span，其作用等同 inline-block #5 中的::after。本例支持所有主浏览器。

4:由于ie6,7下不支持display:inline-block,

　　IE6 中 inline 元素只要触发了hasLayout 其表现就类似于 inline-block，这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout，

表现出来是一样的。

5:display:inline-block 后的元素会产生水平空隙 font-size:0:解决间隙问题

<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

#demo{

    height:100px;

    text-align:center;

    font-size:0;/*去除 inline-block 空隙*/

    background-color: red;

}

#demo:after,#demo span{

    display:inline-block;

    *display:inline;/*inline-block 兼容ie6,7*/

    *zoom:1;/*inline-block 兼容ie6,7*/

    width:0;

    height:100%;

    vertical-align:middle;

}

#demo:after{

    content:'';

}

#demo p{

    display:inline-block;

    *display:inline;/*inline-block 兼容ie6,7*/

    *zoom:1;/*inline-block 兼容ie6,7*/

    vertical-align:middle;

    font-size:16px;

}

</style>

</head>

<body>

    <div id="demo">

    <p>这是一个终极实现的水平垂直居中实例</p>

    <!--[if lt IE 8]><span></span><![endif]-->

</div

</body>

</html>

为了更加理解实现原理，这里贴出参照文和相关知识原理
原文参照：http://demo.doyoe.com/css/alignment/

inline-block的前世今生：http://www.iyunlu.com/view/css-xhtml/64.html

未知高度多行文本垂直居中：http://iyunlu.com/view/css-xhtml/77.html

css-实现元素垂直居中对齐的更多相关文章

  1. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  2. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  3. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  4. CSS关于元素垂直居中的问题

    今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码 方法1: <div class="div1"> <d ...

  5. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  6. 黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  7. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

  8. 用 CSS 实现元素垂直居中，有哪些好的方案？

    1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...

  9. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. bzoj 2815 [ZJOI2012]灾难（构造，树形DP）

    [题意] 求把每个点删除后,不可达点的数目. [思路] 构造一棵“灭绝树”,要求这棵树满足如果删除根节点后则该子树内的所有结点都不可达.则答案为子树大小-1. 如何构造这棵“灭绝树”? 将原图拓扑排序 ...

  2. bzoj 2588 Spoj 10628. Count on a tree（主席树）

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  3. C++设计模式——策略模式

    策略模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对策略模式是这样说的:定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.该模式使得算法可独立于使用它的客户而变化 ...

  4. hbase0.96与hive0.12整合高可靠文档及问题总结

    本文链接:http://www.aboutyun.com/thread-7881-1-1.html 问题导读:1.hive安装是否需要安装mysql?2.hive是否分为客户端和服务器端?3.hive ...

  5. 成功在BAE上部署ghost 5.0

    这周摸索着网站的建设,终于在今天成功上线!这里要谢谢ghost中文网和群里的网友,他的博客在这opengiser.他们的帮助太重要了.现在把过程记录下来,共同学习.试运营地址在edwardesire. ...

  6. IOS上的字符编码

    IOS字符编码 字符编码经常能听到的有Unicode.UTF-8.GBK.GB2312.GB18030.BIG5等.这些编码方式都有什么区别呢? 其实这些编码,大体分两类:全球统一编码和各过个语种的独 ...

  7. Gym 100827G Number Game （博弈）

    Number Game Alice and Bob are playing a game on a line of N squares. The line is initially populated ...

  8. Android最新锁屏病毒分析及解锁

    一.情况简介   从去年开始PC端的敲诈者类病毒在不断的爆发,今年年初的时候手机上也开始出现了敲诈者之类的病毒,对这类病毒很无语也是趋势,因为很多时候病毒的产生是和金钱利益相关的.前天去吾爱破解论坛病 ...

  9. 使用纯代码定义UICollectionView和自定义UICollectionViewCell

    1.自定义UICollectionView 2.实现<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,UICollec ...

  10. Android提高21篇之二：SurfaceView的基本使用方法

    上次介绍MediaPlayer的时候稍微介绍了SurfaceView,SurfaceView由于可以直接从内存或者DMA等硬件接口取得图像数据,因此是个非常重要的绘图容器,这次我就用两篇文章来介绍Su ...