有几种不同的方式到垂直中心与
CSS的对象，但它是很困难的选择是正确的。我会告诉你所有我见过的最好的方式，以及如何创建一个可爱的小中心网站。
用CSS垂直居中是不是一件容易的事。有许多不同的方式，在某些浏览器可能无法正常工作。让我们回顾一下5种不同的方式垂直居中的对象，以及每种方法的优点和缺点。（你可以看到我简要地解释他们所有的测试页。）
方法1
此方法设置一些<DIV> s到像一个表显示，所以我们可以使用表的垂直对齐属性（非常不同的其他元素）。
<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;}
区别
- 内容可以动态改变高度（没有被定义在CSS）
- 内容不切断时，没有足够的空间，在包装
- 在Internet Explorer中不起作用（甚至不是IE 8测试版）
- 许多嵌套标签（不是真的说不好，这是一种主观的话题）
方法2
此方法将使用绝对定位的div，顶端设置到50％，和上边距设置为负半内容的高度。这意味着对象必须有一个固定的高度，是由CSS定义。
因为它有一个固定的高度，你可能想设置溢出：汽车;内容div，所以如果有太多的内容，以适应，滚动条会出现，而不是继续在外面的div的内容！
<div id="content">
Content Here
</div>
#content {position:absolute; top:50%; height:240px; margin-top:-120px; / *负半的高度* / }
区别
- 当没有足够的空间，内容消失（如
格是身体内的用户缩小浏览器窗口，滚动条不会出现）
方法3
在此方法中，我们将插入一个div上面的内容元素。这将设置高度：50％;和利润率底：-contentheight的。的内容，然后将清除浮动，并最终在中间。
<div id="floater">
<div id="content">
Content here
</div>
</div>
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
区别
- 作品在所有浏览器
- 当没有足够的空间（即窗口缩小），我们的内容将不会被切断，会出现一个滚动条。
- 只有一个我能想到的是，它需要一个额外的空元素（这是不坏，另一个主观题）
方法4
这种方法使用的位置是：绝对有一个固定的宽度和高度的div。的div，然后告诉拉伸至顶部：0;底部：0; 不能因为固定高度，因此保证金：自动;使坐在中间。这是类似的使用非常普遍的保证金：0汽车;水平中心块元素。
<div id="content">
Content here
</div>
#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}
区别
- 在Internet Explorer中不起作用（不工作了IE8 Beta）
- 没有滚动条的内容是削减在容器中，如果没有足够的空间
方法5
此方法仅中心的单行文本。简单地设置行高到对象的高度，并在中间的文本坐在
<div id="content">
Content here
</div>
#content {height:100px; line-height:100px;}
- 区别
- 作品在所有浏览器
- 不切断时，是没有足够的空间
- 纯文字作品（无块元素）
- 当有超过单行（如当它包装），它打破严重
这种方法是非常有用的小元素，如中心内的一个按钮或文本单行文本字段，。
有哪些方法？
我最喜欢的方法是3号-使用漂浮物和清除内容。它不会有任何重大的缺点。因为内容将清除：既;，你也可以把它上面的其他元素，窗口崩溃时，中心内容将不包括他们。见演示。
<div id="top">
<h1>Title</h1>
</div>
<div id="floater"></div>
<div id="content">
Content Here
</div>
#floater {float:left; height:50%; margin-bottom:-120px;}
#top {float:right; width:100%; text-align:center;}</strong>
#content {clear:both; height:240px; position:relative;}
现在你知道它是如何工作的，让我们开始创建一个简单但有趣的网站！最终产品将是这个样子：
第1步
它总是好的开始，语义标记。这是我们的页面如何将结构：
- ＃浮子（推到中间的内容）
- ＃中心（中心框）
- ＃底部（版权等）
这里是我将使用XHTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Centred Company</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body>
<div id="floater"></div>
<div id="centered">
<div id="side">
<div id="logo"><strong><span>A</span> Company</strong></div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="content">
<h1>Page Title</h1>
<p>
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.
</p>
<h2>Heading 2</h2>
<p>
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.
</p>
</div>
</div>
<div id="bottom">
<p>
Copyright notice goes here
</p>
</div>
</body>
</html>
第2步
现在我们将开始与一些基本的CSS的页面布局。你应该把这个styles.css的，这是挂在我们的HTML。
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;
}
之前，我们可以使我们的内容垂直居中，身体和HTML必须延伸到100％的高度。因为里面的padding和margin的高度，我们必须让他们0，这样滚动条不会出现只是告诉你一个小幅度。
浮动的保证金，底部是内容的高度（400像素）的一半，这是200像素。
你现在应该有一些看起来像这样：
＃为本的宽度是80％。这是使您的网站上的小屏幕和大屏幕上宽小（我的中大屏幕上，许多老的网站是在左上角的小，它是有点恼人）。这被称为有液体的布局。设置最小宽度和最大宽度也停止过大或过小。互联网的总管doen't支持分钟最大widtgh虽然。很明显，你可以选择，而不是有一个固定的宽度。
因为＃为中心的相对位置，我们可以使用它里面的绝对定位来定位元素。溢出：汽车上使用＃内容，所以会出现一个滚动的内容时，它里面不适合。Internet Explorer中不喜欢溢出：汽车;除非我们告诉它的高度（不只是顶部和底部的位置，而不是在％），所以我们也这样做。
第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;
}
进入菜单样的事情的清单转弯时做的第一件事是删除点分列表式：没有，所有的margin和padding。如果你想让它有一个保证金或填充，确保您指定的究竟是什么，不要离开它，因为他们可以改变的网页浏览器的默认。
接下来的事情要注意的是，该链接设置为块元素显示。这使得他们填补了整条生产线，并为您提供更多的对它们的控制。如果你想使你的菜单水平（本设计中不起作用），那么你就可以使他们以及浮动。
其他有趣的事情，需要注意的菜单是：前和后的CSS伪元素让你插入之前和之后的元素含量。这是一个很好的方式，包括小图标或字符，如在年底的每一个环节的箭头。这并不工作在Internet Explorer中，虽然之前的版本8。
第4步
最后要做的是添加一些CSS使页面看起来有点更好。
#centered {
-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}
h1, h2, h3, h4, h5, h6 {
font-family:Helvetica, Arial, sans-serif;
font-weight:normal; color:#666;
}
h1 {
color:#f93; border-bottom:1px solid #ddd;
letter-spacing:-0.05em; font-weight:bold;
margin-top:0; padding-top:0;
}
#bottom {
padding:10px;
font-size:0.7em;
color:#f03;
}
#logo {
font-size:2em; text-align:center;
color:#999;
}
#logo strong {
font-weight:normal;
}
#logo span {
display:block;
font-size:4em; line-height:0.7em;
color:#666;
}
p, h2, h3 {
line-height:1.6em;
}
a {
color:#f03;
}
一个要注意的是圆角＃中心。CSS3中，应该有一个边界半径属性来设置圆角的半径。这不是任何主流浏览器实现，然而，除非你使用的万盎司或WebKit的前缀（Mozilla的Firefox和Safari / Webkit的）
兼容性说明
正如你可能已经猜到了，Internet Explorer是唯一的主浏览器，给你带来麻烦：
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
