欢迎大家来到IT世界,在知识的湖畔探索吧!
前端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。
关注我！了解更多前端干货！
先设定一个html结构以及css的基本样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何让div实现水平居中</title>
</head>
<body>
<div id="dad">
<div id="son"></div>
</div>
</body>
</html>
欢迎大家来到IT世界,在知识的湖畔探索吧!
css样式
欢迎大家来到IT世界,在知识的湖畔探索吧!#dad{
width: 400px;
height: 200px;
border: 3px solid green;
margin: 30px auto;
}
#son{
width: 100px;
height: 100px;
background: purple;
}
方法一：纯margin
/*css处添加下面代码*/
#son{
margin:0 auto;
}
方法二：position定位
欢迎大家来到IT世界,在知识的湖畔探索吧!/*css处添加下面代码*/
#dad{
position: relative;
}
#son{
position: absolute;
left:50%;
margin-left:-50px;
}
/*注意：margin-left是负值，是#son这个div宽的一半*/ç
方法三：flexbox
/*css处添加下面代码*/
#dad{
display: flex;
justify-content: center;
}
/*注意：弹性盒子的大部分属性都是写在父级上的*/
以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～
关注我，带你了解更多前端干货！
学前端，就选锐盈课堂！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/22043.html
