目录
效果图
代码及其解释
补充解释
效果图
同时实现盒子与文字的居中
代码及其解释
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1{width: 500px;height: 500px;background-color: #B8860B;margin: 0 auto;/* 当left、right两个方向都设为auto时，自动水平居中，比如这里就是，上下为0，左右为auto */border: 1px solid #B8860B;/* 一定要将大盒子中设置边框，不然的话系统会将大小盒子看成一个整体，当你要把小盒子在大盒子内向下移动时，会整体移动 */margin-top: 150px;}#box2{width: 100px;height: 100px;background-color: greenyellow;margin: 0 auto;text-align: center;line-height: 100px;/* 文字高度=盒子高度时文字才能完全居中 */margin-top: 200px;}</style></head><body><div id="box1"><div id="box2">哈哈哈</div></div></body>
</html>
补充解释
/* 一定要将大盒子中设置边框，不然的话系统会将大小盒子看成一个整体，当你要把小盒子在大盒子内向下移动时，会整体移动 */
这句话可能会引起一些迷惑
这是因为没有边框时：
可以看出，此时小盒子并没有居中效果，并且此时小盒子也是有margin值的，但无法实现居中操作
今天的分享就到此结束啦~~希望能帮到您！
