首页 > 代码库 > 用CSS让未知高度内容垂直方向居中
用CSS让未知高度内容垂直方向居中
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; text-align:center; #position:relative; } #middle{ display:table-cell; vertical-align:middle; #position:absolute; #top:50%; #left:50%; } #inner{ #position:relative; #top:-50%; #left:-50%; } </style></head><body> <div id="outer"> <div id="middle"> <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/> </div> </div></body></html>
原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; position:relative; } #inner{ position:relative; left:50%; top:50%; margin-left:-71px; margin-top:-27px; } </style></head><body> <div id="outer"> <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/> </div></body></html>
用负margin实现，但缺点是要知道居中内容的宽度和高度。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。