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. ArcGIS 10.2与CityEngine2013共存的安装

    直接上干货 大前提:由于License Manager的不同版本无法同时安装,因此要想ArcGIS和CityEngine共存其License Manger必须一致. 通过校验安装包中License M ...

  2. 说点手动导jar包的细节Referenced Libraries

    对于Referenced Libraries 若是手动,新建好Scala项目工程,这里取名为ScalaInAction 得需将Scala 2.11.8自带的,换成2.10.*版本 在其上,点击右键,B ...

  3. python 错误、调试和测试

    在程序运行过程中,总会遇到各种各样的错误. 有的错误是程序编写有问题造成的,比如本来应该输出整数结果输出了字符串,这种错误我们通常称之为bug,bug是必须修复的. 有的错误是用户输入造成的,比如让用 ...

  4. java入门学习（十一）逻辑运算符和位运算符

    请关注我的博客:www.taomaipin.com 家里有急事 暂停了几天,抱歉,现在呢开始说说java的运算语句和运算符 如果想利用java的运算语句 那么就离不开java的运算符,前面第九章讲了j ...

  5. 使用CSS3和jQuery可伸缩的搜索条

    使用CSS3和jQuery可伸缩的搜索条 helloweba.com 作者:月光光 时间:2013-12-09 21:23 标签: CSS3 jquery 搜索条在我们网站是必不可少的,尤其是在有限的 ...

  6. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  7. Winform- DotNetBar for Windows Forms的安装的添加

    Winform界面不好看,偶尔在网上看到winform的界面美化,对比了一下选择了DotNetBar for Windows Forms 1.破解版网上很多,提供一个参考的下载地址http://dx. ...

  8. MYSQL- 分页存储过程

    工作需要,用到MYSQL的分页功能,在网上找到一个不错的分页存储过程,代码整理了一下! 存储过程代码 CREATE PROCEDURE `sp_hj_splitpage`( in _pagecurre ...

  9. WIN32进阶必备:跟随鼠标移动的子窗口

    上两张Demo的图,方便朋友们选择是否继续看文章. 在子窗口的白色区域按下鼠标左键不放并移动鼠标可以拖拽子窗口跟随鼠标移动. 选择继续看下去的朋友不要担心,接下来就是正文了. PART 1:Demo功 ...

  10. iOS 定时器Timer常见问题

    最近有朋友问我使用NStimer遇见与ScrollView并存时存在主线程阻塞的问题,自己总结几种解决方法: 问题原因: 一般定时器timer都会被以默认模式default添加到主线程的runloop ...