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

使用 CSS 垂直居中对象的方法有很多种，而难点在于选择正确的方法。我将解释我认为的良好做法以及如何创建一个居中的网站。

使用 CSS 实现垂直居中并不容易。有些方法在某些浏览器中不起作用。下面我们来看看垂直居中对象的五种不同方法，以及每种方法的优缺点。（请查看测试页面以了解简要说明。）

方法 1

此方法将某些div的显示模式设置为表格，因此我们可以使用表格的-align属性。

<div class="wrapper">  
    <div class="cell">
        <div class="content"> Content goes herediv>
    div>
div>  

.wrapper {display:table;} 
.cell {
    display:table-cell; 
    vertical-align:middle;
}

优势：

高度可以动态改变（不需要在CSS中定义）。空间不足时不会被截断。

缺点：

（甚至是 IE8 测试版），许多嵌套标签（不是那么糟糕，另一个话题）

方法 2：

此方法使用绝对定位的 div，将其顶部设置为 50%，并将顶部设置为负高度。这意味着对象必须具有在 CSS 中指定的固定高度。

因为有固定的高度，所以可能需要指定：auto，这样如果太多的话，会出现滚动条，避免溢出。

<div class="content"> Content goes herediv>  

.content {
    position:absolute; 
    top:50%; height:240px; 
    margin-top:-120px; /* negative half of the height */ 
}

优势：

适用于所有浏览器

无需嵌套标签

缺点：

当空间不够时，就会消失（类似div在body内部时，用户缩小浏览器窗口，滚动条不出现的情况）

方法 3

此方法在元素外部插入一个 div。设置为：50%;-:-;。

清除浮动并居中显示。

<div class="floater">div>  
<div class="content"> Content here div>  

.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}

优势：

适用于所有浏览器

当空间不够时（例如：窗口缩小），不会被截断，并且会出现滚动条

缺点：

我唯一能想到的是它需要一个额外的空元素（不是那么糟糕，但那是另一个话题）

方法 4

此方法使用具有固定宽度和高度的 div。将 div 设置为 top:0; :0;。但是，由于它具有固定高度，因此其上方和下方实际上不能有 0 间距，因此 :auto; 会将其居中。使用 :auto; 垂直居中块级元素非常简单。

<div class="content"> Content herediv>  

样式表：

.content {
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

优势：

简单的

缺点：

在 IE（IE8 beta）中无效

当空间不足时，它会被截断，但不出现滚动条。

方法 5

此方法只能使一行文本居中。只需将 line- 设置为该对象的值即可使文本居中。

<div id="content"> Content herediv>  

.content {
    height:100px; 
    line-height:100px;
}

优势：

适用于所有浏览器

如果空间不足，则不会被截断

缺点：

仅对文本有效（不适用于块级元素）

当有多行时，断字是不好的

此方法对于小元素非常有用，例如居中按钮文本或单行文本。

哪种方法？

我最喜欢的是方法 3，它几乎没有缺点。因为它会清除浮动，所以你可以在其上放置其他元素，并且当窗口缩放时，

居中不会覆盖其他元素。参见示例。

<div class="top">Titlediv>  
<div class="content"> Content Herediv>  

.floater {
    float:left; height:50%; margin-bottom:-120px;
    } 
 .top {
 float:right; width:100%; text-align:center;
 } 
.content {
clear:both; height:240px; position:relative;  
}

现在您知道发生了什么，让我们开始创建一个简单但有趣的网站。最终的外观应如下所示：

步骤 1

从语义标记开始是个好主意。我们的页面如下所示：

.floater/*把 content 置中*/ 
.contred/*centre 盒*/ 
.side 
.logo 
.nav/*无序列表*/ 
.content 
.bottom/*放置版权等*/

这是我使用的 xhtml 代码：

A Centred Company <div id="centered"><div id="side"><div id="logo">**<span>Aspan> Company**div>- [Home](#)  
- [Products](#)
- [Blog](#)
- [Contact](#)
- [About](#)
div><div id="content">  
<h1Page Titleh1>  
Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.  
<h2>Heading 2<h2>
Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.div>div><div id="bottom"> Copyright notice goes herediv>  

第 2 步：

现在我们开始用一些基本的 CSS 来设计页面。将以下代码放入我们 html 页面顶部的 style.css 中。

html, body { margin:0; padding:0; height:100%; }  
body { background:url('page_bg.jpg') 50% 50% no-repeat #FC3; font-family:Georgia, Times, serifs; }  
.floater { position:relative; float:left; height:50%; margin-bottom:-200px; width:1px; } 
.centered { position:relative; clear:left; height:400px; width:80%; max-width:800px; min-width:400px; margin:0 auto; background:#fff; border:4px solid #666; } 
.bottom { position:absolute; bottom:0; right:0; } 
.nav { position:absolute; left:0; top:0; bottom:0; right:70%; padding:20px; margin:10px; } 
.content { position:absolute; left:30%; right:0; top:0; bottom:0; overflow:auto; height:340px; padding:20px; margin:10px; }

在我们垂直居中 body 和 html 之前，它们应该被拉伸到 100% 高度。

在和之内，所以我们要把它们设置为0，以防止因为尺寸太小而出现滚动条。

- 是高度的一半（400px），-200px。

现在就可以看到效果了：

# 宽度为 80%。这允许网页随显示器尺寸而变化。这通常称为流体布局。设置 min-width 和

max-width 可以防止网页过大或者过小，但是IE不支持min/max-width，显然可以用固定宽度代替。

因为 # 是相对定位的，所以我们可以在其中使用绝对定位来定位元素。设置 # 的 :auto; 以避免滚动条。除非我们指定高度（不是顶部和定位，也不是 %），否则 IE 不太喜欢 :auto;

因此我们给它指定一个高度。

步骤3

最后要做的是添加一些样式，让页面看起来更美观。让我们从目录开始。

.nav ul { list-style:none; padding:0; margin:20px 0 0 0; text-indent:0; } 
.nav li { padding:0; margin:3px; } 
.nav li a { display:block; background-color:#e8e8e8; padding:7px; margin:0; text-decoration:none; color:#000; border-bottom:1px solid #bbb; text-align:right; } 
.nav li a::after { content:'»'; color:#aaa; font-weight:bold; display:inline; float:right; margin:0 2px 0 5px; } 
.nav li a:hover, .nav li a:focus { background:#f8f8f8; border-bottom-color:#777; } 
.nav li a:hover::after { margin:0 0 0 7px; color:#f93; } 
.nav li a:active { padding:8px 7px 6px 7px; }

需要注意的是#的圆角。在CSS3中，应该有一个-属性来设置圆角的半径（参见CSS3之旅：-（圆角）-Sugar and ）。

流行的浏览器尚不支持它，除非您使用 -moz( ) 或 -webit(/) 前缀。

兼容性注意事项

正如您所预料的，IE 是唯一一款造成问题的浏览器。

#Width必须指定，否则它在任何版本的IE中都不会起作用

IE 6 中的目录被其周围的过多空白打断

IE 8 有多余的空格（作者省略）