首页 > 代码库 > 垂直居中重要方法理解---重点是方法三

垂直居中重要方法理解---重点是方法三

2024-08-04 05:34:37   217人阅读

方法一

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

<div id="wrapper">     <div id="cell">           <div class="content">           Content goes here</div>     </div></div>
#wrapper {
                  display:table;
                        }#cell {
           display:table-cell;
           vertical-align:middle;
         }

优点：
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)

方法二：

这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

<div class="content">	Content goes here</div>
#content {	position:absolute;	top:50%;	height:240px;	margin-top:-120px; /* negative half of the height */}

优点：
适用于所有浏览器
不需要嵌套标签

缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

方法三 

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。

<div id="floater"></div><div id="content">	Content here</div>
#floater	{
                 float:left ; 
                 height:50%; 
                 margin-bottom:-120px;
               }#content	{
                  clear:both ; 
                  height:240px ; 
                  position:relative ;
                }

优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)

例如：


上边的元素正好在50%–0.5*下边元素的位置 ：这里为了便于说明，我给#floater添加了背景和内容；
 
如何不给#floater添加内容，看到是这样的：
 为了便于看清楚：
我改变父级元素为box，如下：

四、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle {
height: 4em;
line-height: 4em;
overflow: hidden;
}

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

五、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle {
padding-top: 24px;
padding-bottom: 24px;
}

优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度

垂直居中重要方法理解---重点是方法三


联系
我们