原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

Line-Height Method


试用:单行文本垂直居中,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Text here</div>
</div>

css

1
2
3
#child {
line-height: 200px;
}

垂直居中一张图片,代码如下

html

1
2
3
<div id="parent">
<img src="data:image.png" alt="" />
</div>

css

1
2
3
4
5
6
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

CSS Table Method

适用:通用,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug:

1
2
3
#child {
display: inline-block;
}

Absolute Positioning and Negative Margin

适用:块级元素,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

Absolute Positioning and Stretching

适用:通用,但在IE版本低于7时不能正常工作,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}

Equal Top and Bottom Padding

适用:通用,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}

Floater Div

适用:通用,demo

代码:

html

1
2
3
4
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}

以上就是六种方法,可以在实际的使用过程中合理选择,参考文章《vertical-centering》。

[转]-CSS 元素垂直居中的6种方法的更多相关文章

  1. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  2. 顽石系列:CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  3. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  4. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

  5. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  6. css元素垂直居中的8中方法

    1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...

  7. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  9. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

随机推荐

  1. android 5.0以下版本使用atof报错解决

    经过测试,如果手机系统在5.0之下,项目project.properties的target若在5.0以上(android-20), NDK 使用atof就会报错: cannot locate symb ...

  2. 海洋女神建新installshield交流群了,原来的老群都满了,请加新群哦,记得认真填写验证信息

    群号511751143 海洋女神installshield群

  3. word2vec + transE 知识表示模型

    本文主要工作是将文本方法 (word2vec) 和知识库方法 (transE) 相融合作知识表示,即将外部知识库信息(三元组)加入word2vec语言模型,作为正则项指导词向量的学习,将得到的词向量用 ...

  4. hdu 2602 Bone Collector(01背包)模板

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Bone Collector Time Limit: 2000/1000 MS (Java/Ot ...

  5. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

  6. sqlserver字段类型

    bit    整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据类型, ...

  7. 多模块打包后,扫描不到@controller和@service,实现 ADD DIRECTORY ENTRIES

    多模块打包后,扫描不到@controller和@service等Bean. 原因:打包时没有生成目录信息 解决办法: 1.在eclipse或者myeclipse 打包时 勾选 ADD DIRECTOR ...

  8. Linear Algebra lecture3 note

    Matrix multiplication(4 ways!) Inverse of A Gauss-Jordan / find inverse of A   Matrix multiplication ...

  9. $.post() 传递多个参数.

    $("#button").click(function() { /获取表单中id为idname和count的文本值付给property的两个属性 var property={&qu ...

  10. 2017年1月4日-linux学习

    老男孩Linux运维实战培训 1.EmEditor文本编辑工具,我用Notepad++也很好用 2.win32文本比较工具使用技巧,我用svn也很好用 3.安装vmware软件及新建配置虚拟机视频,已 ...