普遍对web前端的理解误
Html标签 abbr和
Oct
30
table很容易做到绝对居中是没错的，但这里讨论的是css的方法。
在未知高度的情况如何让容器左右、垂直居中？
演示地址：attachment.php?fid=60
这段代码可以基本解决各常用浏览器的正常显示，已测试的浏览器有：IE6, Firefox1.0/1.5/2.0 , Opera8.0/9.0
但IE7会有问题，解决办法是不加文档声明即 !DOCTYPE
很多时候常会用到垂直居中，可惜css没能给出一个比较简单的方法，无奈～～
网络上也有很多关于绝对居中的方法，如针对图片的居中、背景的居中、已知容器高度的居中
在未知高度的情况如何让容器左右、垂直居中？
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
body,html{margin:0;height:100%;}
.middle{
width:100%;
height:100%;
overflow:hidden;
position:relative;
background:#f8f8f8;
}
.middle[class]{
display:table;
position:static;
}
.mida{
width:100%;
text-align:center;
position:absolute;
top:50%;
}
.mida[class]{
display:table-cell;
vertical-align:middle;
position:static;
}
.midb{
position:relative;
top:-50%;
width:400px;
margin:0 auto;
}
.border{
border:1px solid red;
}
</style>
</head>
<body>
<div class="middle">
<div class="mida">
<div class="midb border">
<ul>
<li>如何只在首页显示一部分内容？<p>要在首页只显示一部分内容，并在点击“阅读全文”后才能看到完整内容，请在需要截断日志的地方插入[separator]标记。或者，您可以点击编辑栏上的 按钮。</p></li>
<li>如何给文章分页？<p>请在需要分页的地方插入[newpage]标记。或者，您可以点击编辑栏上的 按钮。一篇文章可包含多个分页符。</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<head>
<style>
body,html{margin:0;height:100%;}
.middle{
width:100%;
height:100%;
overflow:hidden;
position:relative;
background:#f8f8f8;
}
.middle[class]{
display:table;
position:static;
}
.mida{
width:100%;
text-align:center;
position:absolute;
top:50%;
}
.mida[class]{
display:table-cell;
vertical-align:middle;
position:static;
}
.midb{
position:relative;
top:-50%;
width:400px;
margin:0 auto;
}
.border{
border:1px solid red;
}
</style>
</head>
<body>
<div class="middle">
<div class="mida">
<div class="midb border">
<ul>
<li>如何只在首页显示一部分内容？<p>要在首页只显示一部分内容，并在点击“阅读全文”后才能看到完整内容，请在需要截断日志的地方插入[separator]标记。或者，您可以点击编辑栏上的 按钮。</p></li>
<li>如何给文章分页？<p>请在需要分页的地方插入[newpage]标记。或者，您可以点击编辑栏上的 按钮。一篇文章可包含多个分页符。</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
演示地址：attachment.php?fid=60
这段代码可以基本解决各常用浏览器的正常显示，已测试的浏览器有：IE6, Firefox1.0/1.5/2.0 , Opera8.0/9.0
但IE7会有问题，解决办法是不加文档声明即 !DOCTYPE
很多时候常会用到垂直居中，可惜css没能给出一个比较简单的方法，无奈～～
网络上也有很多关于绝对居中的方法，如针对图片的居中、背景的居中、已知容器高度的居中
