首页 > 代码库 > 元素居中css
元素居中css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直</title>
<style type="text/css">
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
background-color:#ccc;
}
/*方法1 ie8以下不兼容
.main{ width:1000px; margin:0 auto; }
.layout{ position:relative; float:left; width:500px; border:1px solid #f00; height:aoto; }
.layout .box{ position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:100px;
height:240px; background:#000;}*/
/*方法2，自适应宽度和高度，兼容所有浏览器*/
div.layout1{ position:relative; float:left; left:50%; }
div.box1{ position:relative; float:left; right:50%; border:1px solid #f00; }
</style>
</head>
<body>
<!-- 一、单行内容的居中 line-height
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
二、多行内容居中，且容器高度可变 padding-top padding-bottom
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度
三、把容器当作表格单元 display:table; >display:teble-cell;
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效
四、这种方法，在 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 不会被截断，滚动条出现
缺点：
唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)
五、这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}
优点：
简单
缺点：
IE(IE8 beta)中无效
无足够空间时，content 被截断，但是不会有滚动条出现
///
这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。
<div>
Content goes here</div>
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
优点：
适用于所有浏览器
不需要嵌套标签
缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>center</title>
<style type="text/css">
.p{ position:relative; float:left; left:50%; }
.c{ position:relative; float:left; right:50%; border:1px solid #f00; }
.p1{ position:relative; width:800px; height:600px; border:1px solid #f00;}
.c1{ position:absolute; width:500px; height:300px; top:50%; left:50%; margin:-150px 0 0 -250px; background:#000;}
</style>
</head>
<body>
<div>
<div>cccccccc</div>
</div>
<div>
<div>c1c1c1c1c1c1</div>
</div>
</body>
</html>
-->
<div class="">
<div id="content">center</div>
</div>
<div>
<div class="layout layout1">
<div class="box box1">
<img src=http://www.mamicode.com/"xx.jpg" alt="" />
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
</div>
</div>
</div>
</body>
</html>