您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“HTML怎么实现盒子居中和内容居中”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
一、盒子模型练习
我们有个需求：
创建两个盒子，大盒子嵌套一个小盒子，大盒子是红色的，小盒子是蓝色的，并且小盒子在大盒子中是居中的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.big{
width:500px;
height: 500px;
background-color: red;
box-sizing: border-box;
border:1px solid;
}
.small{
width:300px;
height:300px;
background-color: blue;
/*margin-left:100px;*/
/*margin-top:100px;*/
margin:100px auto;/*这样写是等价于上面两个语句，这种方法就是让我们的小盒子居中
/*注意点：如果两个盒子是嵌套关系，设置里面的盒子，外边距的话，外面的盒子也会顶下来
解决方法：在外面的大盒子中添加一个border属性，因此在企业开发中，一般情况下入伏哦需要控制嵌套关系盒子的举例，
应该首先考虑padding，其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的，*/
?
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
注意点：
（1）
注意点：如果两个盒子是嵌套关系，设置里面的盒子的外边距的话，外面的
盒子也会顶下来 ，即：仅有属性：
margin-left:100px;
margin-top:100px;
解决方法：在外面的大盒子中添加一个border属性，因此在企业开发中，一般情况下如果需要控制嵌套关系盒子的距离，应该首先考虑padding，其次在考虑margin,因为margin本质上是用于控制兄弟关系之间的间隙的
（2）我们看到一个新的属性值
margin:100px auto
这个前面是距离，后面auto就会将小盒子进行居中，如果写成：margin:0 auto.那么只会在水平方向上进行居中，因此我们要计算好距离像素，写到属性值中。
二、text-align:center和margin:0 auto之间的区别
1.text-align:center;作用：设置盒子中的存储的文字/图片水平居中。
2.margin:0 auto;作用：让盒子自己水平居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d116_box_center_and_content_center</title>
<style>
.father{
width:800px;
height:500px;
background-color:red;
text-align: center;
margin: 0 auto;
}
.son{
width:100px;
height:100px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
我是一个文字
<br>
<img src="image/example1.jpg" alt="">
<div class="son">
?
</div>
</div>
</body>
</html>
“HTML怎么实现盒子居中和内容居中”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。