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-实现元素垂直居中对齐的更多相关文章

CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
CSS制作水平垂直居中对齐多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来), 不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下第一种:通过设置成为表格元素的方式来实现 ...
CSS关于元素垂直居中的问题
今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码方法1: <div class="div1"> <d ...
Web前端 css实现元素垂直居中的常用方法
方法1:table-cell html结构: 1 2 3 <div class="box box1"> <span>垂直居中</spa ...
黄聪：用 CSS 实现元素垂直居中，有哪些好的方案？
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...
[CSS] 子元素垂直居中的两种方式
1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...
用 CSS 实现元素垂直居中，有哪些好的方案？
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: abso ...
css一个元素垂直居中的6种方法
方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

POJ 1738 石子合并2 GarsiaWachs算法
石子合并(GarsiaWachs算法) 只能用该算法过!!! 详解看代码 //#pragma comment(linker, "/STACK:167772160")//手动扩栈~~ ...
uva 11168
题意:给出平面上的n个点,求一条直线,使得所有点在该直线的同一侧且所有点到该直线的距离和最小,输出该距离和. 思路:要使所有点在该直线的同一侧,明显是直接利用凸包的边更优.所以枚举凸包的没条边,然后求 ...
Codeforces Round #105 (Div. 2) ABCDE
A. Insomnia cure 哎只能说英语太差,一眼题我看了三分钟. 题意:给5个数k, l, m, n 和 d,求1~d中能被k, l, m, n 至少一个整除的数的个数. 题解:…… 代码: ...
ios 对象的集合类(collection classes)
当你着手为你的应用编写代码的时候,你会发现有许多可供使用的Objective-C的框架类,其中尤其重要的就是基础框架类,它为平台所有的应用提供基础服务.基础框架类中包括了表示字符串和数字等基本数据类型 ...
简单dp-poj-2231-Moo Volume
题目链接: http://poj.org/problem?id=2231 题目大意: 给n个位置,求所有位置到其他n-1个位置的距离总和. 解题思路: 简单dp. o(n^2)的时间复杂度会超.先对这 ...
Python中如何把一个UTC时间转换为本地时间
需求: 将20141126010101格式UTC时间转换为本地时间. 在网上搜了好长时间都没有找到完美的解决方案.有的引用了第三方库,这就需要在现网安装第三方的软件.这个是万万不可的.因为真实环境不一 ...
IOS 支付
支付:http://www.cnblogs.com/wangerxiansheng/p/4498586.htmlhttp://www.cnblogs.com/iCocos/p/4598548.html ...
SQLite使用教程10 运算符
SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...
接入新浪、腾讯微博和人人网的Android客户端实例接入新浪、腾讯微博和人人网的Android客户端实例
做了个Android项目,需要接入新浪微博,实现时也顺带着研究了下腾讯微博和人人网的Android客户端接入,本文就跟大家分享下三者的Android客户端接入方法. 一.实例概述说白了,接入微博就是 ...
SQL Server查询所有的表名/空间占用量/行数
select object_name(id) tablename, 8*reserved/1024 reserved, rtrim(8*dpages)+'kb' used, 8*(reserved-d ...

css-实现元素垂直居中对齐