欢迎大家来到IT世界,在知识的湖畔探索吧!欢迎大家来到IT世界,在知识的湖畔探索吧!欢迎大家来到IT世界,在知识的湖畔探索吧!欢迎大家来到IT世界,在知识的湖畔探索吧!欢迎大家来到IT世界,在知识的湖畔探索吧!
小编在做练习时遇到了一个问题：如何使一个div在另一个div里面水平和垂直两个方向全部居中。之前一般的情况都是一个div在另一个div里面水平居中，直接使用margin：0 auto；即可解决。这次的情况第一次遇到，网上找了一些方法，亲测有效，总结如下，将其放入一个页面内了。
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
<div class=”parent1″>
<div class=”child1″>方法一</div>
</div>
<div class=”parent2″>
<div class=”child2″>方法二</div>
</div>
<div class=”parent3″>
<div class=”child3″>方法三</div>
</div>
<div class=”parent4″>
<div class=”child4″>方法四</div>
</div>
</body>
</html>
CSS部分：
<style>
*{margin: 0;padding: 0;}
/*方法一*/
.parent1{
width: 500px;height: 200px;
border: 4px solid #FF4500;
position: relative;
margin-top: 20px;margin-bottom: 20px;
}
.child1{
width: 200px;height: 150px;
margin: auto;position: absolute;
top: 0;right: 0;bottom: 0;left: 0;
background-color: #008B8B;
line-height: 150px;
text-align: center;
color: white;
}
/*方法二*/
.parent2{
width: 500px;height: 200px;
border: 4px solid #008B8B;
display: table-cell;
vertical-align: middle;
text-align: center;}
.child2{
width: 200px;height: 150px;
display: inline-block;
background-color: #008B8B;
line-height: 150px;color: white;
}
/*方法三*/
.parent3{
width: 500px;height: 200px;
border: 4px solid #008B8B;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.child3{
width: 200px;height: 150px;
background-color: #008B8B;
line-height: 150px;
text-align: center;
color: white;
}
/*方法四 */
.parent4{
width: 500px;height: 200px;
border: 4px solid #FF4500;
position: relative;
margin-top: 20px;
}
.child4{
width: 200px;height: 150px;
background-color: #008B8B;
position: absolute;
top: 50%;left: 50%;
margin-left: -100px;
margin-top: -75px;
line-height: 150px;
text-align: center;
color: white;
}
</style>
最后效果图如下：
以上就是几种简单的居中方法，本文纯属练习，如有错误欢迎各位指出。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/41121.html
