关闭

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

202人阅读 评论(0) 收藏 举报
分类:
转自: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/


2012年03月30日 ⁄ Web设计 ⁄ 评论数 1 ⁄ 被围观 306+

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

Line-Height Method

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

代码:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Text here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
<span class="br0">}</span>

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

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"image.png"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="sy0">/</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
<span class="re0">#parent</span> <span class="br0">{</span>
<span class="kw1">line-height</span><span class="sy0">:</span> <span class="re3">200px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#parent</span> img <span class="br0">{</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>

CSS Table Method

table cell demo

适用:通用,demo

代码:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">display</span><span class="sy0">:</span> table<span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">table-cell</span><span class="sy0">;</span>
<span class="kw1">vertical-align</span><span class="sy0">:</span> <span class="kw2">middle</span><span class="sy0">;</span>
<span class="br0">}</span>

低版本 IE fix bug:

1
2
3
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="br0">}</span>

Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

适用:块级元素,demo

代码:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">top</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">30%</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">-15%</span> <span class="nu0">0</span> <span class="nu0">0</span> <span class="re3">-25%</span><span class="sy0">;</span>
<span class="br0">}</span>

Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

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

代码:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
10
11
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
<span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">bottom</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">right</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">30%</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="br0">}</span>

Equal Top and Bottom Padding

vertical centering with padding demo

适用:通用,demo

代码:

html

1
2
3
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
<span class="re0">#parent</span> <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">5%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>

Floater Div

vertical centering with floater div demo

适用:通用,demo

代码:

html

1
2
3
4
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"parent"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"floater"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"child"</span>></span>Content here<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

css

1
2
3
4
5
6
7
8
9
10
11
<span class="re0">#parent</span> <span class="br0">{</span><span class="kw1">height</span><span class="sy0">:</span> <span class="re3">250px</span><span class="sy0">;</span><span class="br0">}</span>
<span class="re0">#floater</span> <span class="br0">{</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw1">left</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">50%</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span>
<span class="kw1">margin-bottom</span><span class="sy0">:</span> <span class="re3">-50px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#child</span> <span class="br0">{</span>
<span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">100px</span><span class="sy0">;</span>
<span class="br0">}</span>

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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简...
  • sinat_21396411
  • sinat_21396411
  • 2015-09-20 16:10
  • 720

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       首先,依旧是概念。介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,...
  • Jt1123
  • Jt1123
  • 2013-12-27 09:26
  • 2070

CSS代码(四):float元素的垂直居中

在前端程序的开发中,经常会遇到将float元素垂直居中的应用场景,并且结合的场景非常之多,如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应用场景,在大部分的情况下,采用的方案有如下三种: 1. 采用flex布局; 2. 综合运用l...
  • yiifaa
  • yiifaa
  • 2017-07-09 19:41
  • 2122

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

转自: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/ 201...
  • kepoon
  • kepoon
  • 2016-03-24 18:48
  • 2020

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

CSS 元素垂直居中的 6种方法 2012年03月30日 ⁄ Web设计 ⁄ 1条评论 ⁄ 被围观 2,777+ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设...
  • TOTORO_RRR
  • TOTORO_RRR
  • 2016-05-10 18:06
  • 186

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

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

css(css3)实现垂直水平居中的那些事

都说“金三银四求职季”,本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:“说说垂直水平居中都有哪些实现方式吧?”       面试过程巴拉巴拉一大堆,现在终于有时间把这些知识点总结归纳起来,希望能帮自己巩固下,也希...
  • u014516981
  • u014516981
  • 2017-03-03 20:10
  • 834

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

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

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

转自: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/ 201...
  • kaikai4
  • kaikai4
  • 2016-07-15 16:51
  • 194

CSS 元素垂直居中的 6种方法(转)

转自: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...
  • u011910290
  • u011910290
  • 2016-03-24 13:28
  • 298
    个人资料
    • 访问:354203次
    • 积分:4993
    • 等级:
    • 排名:第6610名
    • 原创:42篇
    • 转载:723篇
    • 译文:0篇
    • 评论:14条
    最新评论