面试遇到居中的问题，建议的答案
2017-12-26 19:45
543 查看
建议，position：absolute； top：0px； left：0px；bottom：0px；right：0px；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 最近一个刚刚毕业的朋友说，他面试时候，遇到最频繁的css问题就是垂直居中，这里给出几种垂直居中方式！
- iOS 面试中遇到的部分问题及简单答案(1)->(陆续更新)
- 面试中遇到的问题：一个指针重复释放会出现什么情况
- 据说是外企面试最爱提的10个问题(附答案)
- 读完这21个机器学习面试问题和答案，入职率提升99%
- 整理最近php面试过程中遇到的一些问题
- 面试中初级程序员常常遇到的问题—— 描述你做过的项目
- Linux命令面试问题及答案
- Android面试遇到的问题(1)
- MVC面试问题与答案
- 40个Java集合面试问题和答案【中】【转载】
- java多线程和并发面试问题及答案
- 面试问题与答案提示
- 这是电子老鼠的问题，答案对了，但是我遇到了一个叫不完全正确的新结论，求助。。。2333
- python近期遇到的一些面试问题（二）
- 前端开发面试问题及答案整理
- 最常见的 20 个 jQuery 面试问题及答案
- 梳理面试中遇到的HTTP协议相关的问题和知识
- Java面试问题和答案（一）
- 40个Java集合面试问题和答案