高固定情况下的水平及垂直居中_固定高度水平垂直居中-CSDN博客

本文链接：https://blog.csdn.net/storm0/article/details/1805995

本文介绍了一种利用CSS实现元素垂直居中的方法，通过设置position属性结合top百分比与负margin值，使任意宽度但固定高度的元素在浏览器中垂直居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　哇，好久没有Blog一下了，最近实在是忙晕了头，当然不仅仅是工作的问题，还有其它的。

　　今天终于是忙里偷闲，好不容易有点时间更新一下Blog了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。

　　发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。

　　相信水平居中大家都已经了解并会使用了，无非就text-align:center这样，还有为了兼容不可或却的margin:auto。

　　某样功能或效果的实现其实都是依据一定的原理基础上的，有的东西只要明白了它的原理，至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。

　　扯远了，还是回来聊所谓的垂直居中（要垂直居中的这个东东的高度是即定的）。

　　如，要使得一个高150px，宽任意的东东在浏览器中垂直居中：

　　［演示地址：http://www.doyoe.com/model/xhtmlcss/style/cenmid.htm］

CSS部分：

html,body {
margin:0;
font:12px/180% "宋体";
text-align:center;
height:100%;
}
#main {
margin:0 auto;
width:300px;
height:150px;
background-color:#ddd;
text-align:left;
overflow:hidden;
position:relative;
top:50%;
margin-top:-75px;
}
#main h3 {
margin:0;
font:bold 18px/150% "宋体";
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>传说中的水平及垂直居中(高固定)</title>
</head>
<body>
<div id="main">
<h3>传说中的水平及垂直居中</h3>
<ul>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
</ul>
</div>
</body>
</html>

　　如上面这个例子，就已经实现了高为150px的div垂直居中。

　　XHTML部分没有什么值得考究的，只需要看一下CSS部分就行了。首先我们知道要使得一个东东始终呆在浏览器的某个位置，这需要用到position，然后通过top,right,bottom,left来控制具体位置。

　　要使得这个div垂直居中，OK，肯定会想到top:50%。这样其实div的顶部就已经是垂直居中了，但对于整个div来说还并没有垂直居中，所以它需要以顶部作为轴心向上移动若干像素，移动多少呢？废话，当然是这个div实际高度的一半：75px。这样就能保证轴心上下的高是一样的，也就是说整个div就实现垂直居中了。

　　然而为什么要指定html,body{height:100%}呢？这和position:relative有什么联系呢？自己去想，呵呵。