CSS解决未知高度垂直居中

最新推荐文章于 2022-09-29 15:22:58 发布

转载最新推荐文章于 2022-09-29 15:22:58 发布 · 1.1k 阅读

·

0

·

文章标签：

#css #javascript #div #mozilla #浏览器 #table

ASP技术同时被 2 个专栏收录

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了一种在标准浏览器及非标准浏览器下实现未知高度内容垂直居中的CSS方法。对于标准浏览器，可以通过将父级元素设为table样式，并将内部元素设为table-cell并使用vertical-align实现。对于非标准浏览器，则采用子元素顶部50%定位，再内部嵌套一层顶部-50%的元素来达到效果。

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

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

<!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" />

<title>divcenter</title>

<style type="text/css">

body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}

body,html{height: 100%; }

a{color: #333;}

a:hover{color: green;}

#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }

#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/

#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */

div.greenBorder {border: 1px solid green; background-color: #FFF;}

p{margin: 1em;}

</style>

<script type="text/javascript">

// <![CDATA[

function toggleContent(name,n)

{

var i,t='',el = document.getElementById(name);

if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i<n;i++) t += el.origCont;

el.innerHTML = t;

}

// ]]>

</script>

</head>

<body>

<div id="outer">

<div id="middle">

<div id="inner" class="greenBorder">

<p><a href="javascript:toggleContent('inner',1)">默认长度</a>  <a href="javascript:toggleContent('inner',2)">加长页面</a></p>

<p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />

2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />

3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 <br />

1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />

2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />

3.菜单：Effect > Stylize > Drop Shadow，设置如下图。</p>

<address style="text-align:center; padding: .5em; clear: left;">

Design by <a href="http://www.forest53.com">Forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。

</address>

</div>

</div>

</div>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。