本文主要是介绍简洁说明如何实现最外层div盒子在界面中居中显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面中最外层的div居中显示
首先写一个div，加一些样式让div显示出来；
<div class="body_div" style="border: 1px solid red;">让div居中显示
</div>此时的界面显示的div是占满整个浏览器页面的，为了显示出居中效果，可以加一下width、height：width: 500px;height: 150px;
此时页面是这个样子的：
接下来就是中心任务，让div在页面中居中显示。只需要加一句话就全部搞定啦！
之前的代码：
<style type="text/css">.body_div{border: 1px solid red;width: 500px;height: 150px;}
</style>
<div class="body_div">让div居中显示
</div>加完div居中样式之后的代码：
<style type="text/css">.body_div{border: 1px solid red;width: 500px;height: 150px;margin: 0 auto;}
</style>此时的界面样式是这个样子的：
整个过程十分简单，只是对div的样式进行了更改，至于有的资料说需要给body加text-align: center;可以说没什么必要去修改body标签的属性，如果想让div内容居中，在div属性中加居中即可，body加居中那么整个页面的文字都是居中的。
text-align的居中样式对div居中没有直接影响。
欢迎关注偶呀，也欢迎各位萌新前来“刁难”我哦。
这篇关于简洁说明如何实现最外层div盒子在界面中居中显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
