CSS解决未知高度的垂直水平居中自适应问题

2024-07-11 08:24:13

字体：大中小

来源：转载

供稿：网友

今天有人问起，晚上试着写出来，供参考；以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。
从最简单的开始…………
一、如何让一个DIV水平居中？
这个简单不作过多说明！

复制代码

代码如下:
<style>
body { text-align:center}
#info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id="info">this is test.</div>
</body>

提示：您可以先修改部分代码再运行

二、DIV已知高度，如何让他水平加垂直居中？

如果想水平加垂直居中的DIV已知高度和宽度，是最好办的了！
1、先让这个DIV绝对定位；
2、让他距离上边50%，左边50%；这会这个DIV的左上角这个点就是窗口的正中间；
3、因为已经知道了这个DIV的高和宽了，那么再从这里点向左移动总宽的一半就可以了，也就是200PX；向上呢也同理；

复制代码

代码如下:
<style>
#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;}
</style>
<div id="info">this is test.</div>

提示：您可以先修改部分代码再运行

上一篇：条件CSS的介绍

下一篇：CSS教程：语义化方法替代结构化方法