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,动画感觉都挺 ...