您的位置：首页 > 其它

文章标题

2015-11-06 18:38 369 查看
CSS实现垂直居中的5种方法

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Vertical Centre</title>

<style media="all" type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

html {
font-size: 0.75em;
}

.column {
float: left;
width: 19.5%;
background-color: #B0C953;
height: 100%;
border-right: 2px dashed #fff;
position: relative;
}

.content {
background-color: #fff;
padding: 20px;
margin: 10px;
display: block;
}

.label {
position: absolute;
padding: 10px;
background-color: #fff;
opacity: 0.4;
margin: 5px;
}

.label:hover {
opacity: 0.7;
}

.label p {
margin: 0.2em;
padding: 0;
}

.good {
color: #009900;
}

.bad {
color: #FF3300;
}

#wrapper1 {
display: table;
height: 85%;
padding: 3.7em 10px 10px 10px;
}

#middle1 {
display: table-cell;
vertical-align: middle;
background-color: #DDF879;
}

#content2 {
position: absolute;
top: 50%;
margin-top: -120px;
height: 240px;
}

#floater3 {
float: left;
height: 50%;
margin-bottom: -120px;
width: 100%;
background-color: #DDF879;
}

#content3 {
clear: both;
height: 240px;
position: relative;
}

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

#content5 {
line-height: 10em;
height: 10em;
}

code {
background-color: #ddd;
padding: 3px;
line-height: 1.7em;
}

ul {
margin: 0;
padding: 0;
padding-left: 1em;
}

#credit {
position: absolute;
bottom: 0;
right: 0;
opacity: 0.8;
}
</style>
</head>

<body>
<div class="column">
<div class="label" style="top:10px; left:20px;">
<code>display:table;</code>
</div>
<div class="label" style="top:70px; left:20px;">
<code>
display:table-cell;<br/>
vertical-align:middle;
</code>
</div>
<div id="wrapper1">
<div id="middle1">
<div class="content">
<ul>
<li class="good">Everything in this table cell div is centred</li>
<li class="good">It can dynamically change to any height based on content (try by changing your browser font size)</li>
<li class="good">Doesn’t get cut off when there isn't enough room</li>
<li class="bad">Doesn’t work in Internet Explorer</li>
<li class="bad">Uses 2 extra <code>div</code>s</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="label">
Any object, with relative positioning
</div>
<div class="content" id="content2">
<p><code>positoin:absolute; top:50%; height:240px; margin-top:(negative half the height);</code></p>
<ul>
<li class="good">Works in all browsers</li>
<li>Fixed height object (can be ems)</li>
<li class="bad">Gets cut off when there isn't enough space</li>
<li class="good">Doesn't require additional objects</li>
</ul>
</div>
</div>
<div class="column">
<div class="label">
<code>
float:left;<br/>
height:50%;<br/>
margin-bottom:-120px;
</code>
</div>
<div id="floater3"></div>
<div id="content3" class="content">
<p><code>position:relative; clear:left; height:240px;</code></p>
<ul>
<li class="good">Works in all browsers</li>
<li>Fixed Height (can be ems)</li>
<li class="good">Doesn't get cut off when there isn't enough space</li>
<li class="bad">Uses 1 extra empty <code>div</code> (not too bad)</li>
</ul>
</div>
</div>
<div class="column">
<div class="label">
Any object, with relative positioning
</div>
<div id="content4" class="content">
<p><code>top:0; bottom:0; left:0; right:0; <br/>position:absolute; margin:auto; <br/>height:something; width:something;</code></p>
<ul>
<li>Must have a fixed width and height</li>
<li class="bad">This doesn't work in Internet Explorer</li>
<li class="bad">Gets cut off when there isn't enough space</li>
</ul>
</div>
</div>
<div class="column">
<div class="content" id="content5">
Single Line
</div>
<div class="label">
<p><code>line-height:10em; height:10em;</code></p>
<ul>
<li>Only used to centre a single line of text</li>
<li>Container must have fixed height (can be em, can't be %)</li>
<li>(very useful for making buttons)</li>
<li class="good">Works in all browsers</li>
<li class="good">Doesn't get cut off when the isn't enough space</li>
<li class="bad">When there is more than a single line, it breaks badly</li>
</ul>
</div>
</div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航