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

Line-Height Method

试用:单行文本垂直居中,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

适用:通用,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

适用:块级元素,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

适用:通用,但在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

适用:通用,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

适用:通用,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》。

时间: 2024-10-25 15:01:46

CSS 元素垂直居中的 6种方法(转)的相关文章

[转]-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进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方

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

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可. Line-Height Method 试用:单行文本垂直居中,demo 代码: html 1 2 3 <div id="parent"> <div id="child&quo

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

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可. Line-Height Method 试用:单行文本垂直居中,demo 代码: html 1 2 3 <div id="parent"> <div id="child&quo

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

在网页响应式布局中,实现水平居中很简单.可是,垂直居中方面,元素的宽度和高度是不可控的,所以很多办法并不适用. 总结了下平时用到的垂直居中的几种办法: demo中HTML代码: <div class="center"> <span></span> </div> 一:使用table-cell; CSS代码: .table{ display: table; width: 100%; height: 100%; } .center{ displ

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

顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https://blog.csdn.net/bwf_erg/article/details/69844527 MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align 六种方法:https://www.jianshu.com/p/08

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

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中无效.下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点.(可以看看测试页面,有简短解释.) 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper"&g

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

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</span> </div> css: 1 2 3 4 5 .box1{     display: table-ce

css控制元素垂直居中的几种方法

一.单行文本垂直居中 HTML: <div id="parent"> <div id="child">Content here</div> </div> CSS: #child { line-height: 200px; } 二.垂直居中一张图片 HTML <div id="parent"> <img src="image.png" alt="&quo

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

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } HTML代码: <div> <img src="mm.jpg&quo