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 ...

随机推荐

HW7.1
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
【bzoj1300】大数计算器
题意: 求C(n,m) 如果C(n,m)的位数<=12 那么直接输出否则按XXX...XXXXXXXXX的形式输出题解: 这题之前打过但是昨天又想出一种新的做法先说下新的做法吧- - _ ...
BNUOJ-26474 Bread Sorting 逆序对
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26474 题意:给一个数列,可以对三个数操作:把最后一个数放到第一个,前两个数后移一位.问最 ...
Failed to install apk on device timeout
安装应用时遇到下面的错误 Failed to install *.apk on device timeout 在eclipse中,window->prefreences->DDMS-& ...
笔记- iphone手机音频AAC视频H264推流(一) iphone手机推流最佳方案
这几个月一直在做iphone手机音视频的东西,由于个人比较懒,所以一直没整理,现在闲的蛋疼,并且以后项目要搁置了,在这里记录一下我做的iphone手机推流的东西. 项目都是个人的调研与实验,可能很多不 ...
os7新特性之生成二维码
先导入CoreImage.framework 生成二维码读取二维码
[一]初识Json
JSON 对象{ "name":"张三" , "age":22}JSON 数组{"student": [{ " ...
如何在线缩小jpg图片的大小
直接使用在线PS保存成更小格式,即可! 在线PS网址:http://www.webps.cn/ 打开图片点击保存直接拖动滑动条就可以改变图片大小
github快速入门（一）
一.github介绍 git是一款非常知名的代码托管工具.当然现在有了github for windows版本(类似于 svn tortoise). GitHub for Windows 是一个 Me ...
ASP.NET线程与异步
什么是线程? 线程简单来说就是一种数据结构,用来管理这个程序的执行状态,其中包括 1.线程核心对象->寄存器的状态 2.线程环境块,是一块用户模式下的内存,包含线程的异常处理链的头部.线程的局部 ...

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