绝对居中
2015-10-15 20:05
197 查看
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="author" content="胡超" />
<meta charset="utf-8"/>
<style type="text/css">
#a2{
position:absolute; /*：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。父元素一般为body或者声明为position:relative;的容器。无需知道被垂直居中元素的高和宽。*/
top:0;
right:0;
left:0;
bottom:0;
margin: auto;
width:290px;
height:121px;
border:1px solid red;
}
#a1{
width:500px;
height:500px;
border:1px solid red;
position:relative;
}
</style>
</head>
<body>
<div id="a1">
<div id="a2">
</div>
</div>
</body>
</html>
<html>
<head>
<title> new document </title>
<meta name="author" content="胡超" />
<meta charset="utf-8"/>
<style type="text/css">
#a2{
position:absolute; /*：绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。父元素一般为body或者声明为position:relative;的容器。无需知道被垂直居中元素的高和宽。*/
top:0;
right:0;
left:0;
bottom:0;
margin: auto;
width:290px;
height:121px;
border:1px solid red;
}
#a1{
width:500px;
height:500px;
border:1px solid red;
position:relative;
}
</style>
</head>
<body>
<div id="a1">
<div id="a2">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C语言重要知识点总结（一）
- 惠普6500A hp710a不吸纸维修一例
- 《剑指Offer》面试题：1+2+3+...+n
- 影像信息提取之——基于专家知识的决策树分类
- 会操作excel就会批量证书打印!
- 监听SD卡状态
- ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试
- linux中信号
- Jump Game II
- IOS 8 基本定位实现
- 【map练习】【map+模拟】codevs1164 统计数字题解
- 对象序列化
- 【SQL】约束与触发器2
- Jump Game
- 科技相对论：库克，苹果的罪人还是救星
- linux camera application demo(一)
- CSS知识点小结
- Longest Palindromic Substring － Leetcode
- 影像信息提取之——多时相影像动态检测
- hdu 4739 Zhuge Liang's Mines 搜索