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. ThinkPHP中SQL调试方法

    $admin = D('Admin'); $info = $admin->field('`lastlogintime`,`lastloginip`')->where(array('user ...

  2. [Orchard CMS系列] 创建主题（Writing a new theme）

    本文需要对Orchard CMS有基本了解. 开启模块 code generation 创建新的主题工程骨架 Codegen theme MyTheme 创建主题样式 src\Orchard.Web\ ...

  3. OpenCV在Debug和Release两种模式下布恩那个同时运行的问题

    首先,可以肯定的说,两者是可以随时切换进行运行的,若不能运行,必定是配置出了问题 以Debugx64和Releasex64为例: 在Releasex64模式下,我配置好了各种路径: 于是乎,我切换到D ...

  4. 成功在BAE上部署ghost 5.0

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

  5. hdoj 1262 寻找素数对

    寻找素数对 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  6. FIREDAC数据引擎

    以前使用过BDE.ADO.DBX等数据引擎,后来发现它们都没有UNIDAC好用, 所以在很长的一段时间内中间件都使用UNIDAC作为数据引擎. 偶然的机会,使用了DELPHI XE5自带的FIREDA ...

  7. 【C++深入浅出】设计模式学习之观察者模式

    前言 前两天学习了weak_ptr以后还是不甚明了,一则需要实际应用去锤炼,二来就是不懂观察者模式. 正文 观察者模式又叫发布-订阅模式,定义了一种一对多的依赖关系,让多个观察者对象同时监听某一主题对 ...

  8. SQLite数据库入门教程

    SQLite数据库入门教程 SQLite 是一个开源的嵌入式关系数据库,实现自包容.零配置.支持事务的SQL数据库引擎. 其特点是高度便携.使用方便.结构紧凑.高效.可靠. 与其他数据库管理系统不同, ...

  9. 【转】简明vim练级攻略

    本文来自:http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一 ...

  10. UIAlertController 简单修改title以及按钮的字体颜色

    苦逼的开发者,最终败给了一个任性的UI,系统原生UIAlertController的按纽颜色必须改.于是,开始了不归路.之前的版本是自己用view写的一个仿系统UIActionSheet,动画感觉都挺 ...