今天小编跟大家讲解下有关“CSS中div水平居中是什么样的，实现代码是什么”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

如何理解div水平居中呢？这样想象就好了，在一个长方形的div上，水平划一条直线，然后取水平线的中间点，这就是div水平居中了，div水平居中也叫div左右居中，如图所示。

div水平居中的例子如下所示。

<div style="width: 150px;height: 80px;border: 1px solid red">
    <div style="width: 100px;height: 50px;border: 1px solid green;margin-left: calc((150px - 100px) / 2);">

    </div>
</div>

上面中div水平居中里面用到了“margin-left: calc((150px - 100px) / 2)”的这个css，意思是距离左边的距离，css calc()函数是计算函数，距离左边的距离。

计算公式是：(外框宽度-内框宽度)/2

这样就能使div水平居中了，简单吧！150px也可以使用100%宽度代替，效果如图。

这种方法是最简单的。

关于“CSS中div水平居中是什么样的，实现代码是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS如何实现Sticky Footer，具体的方法和代码是什么

  这篇文章主要介绍了CSS实现Sticky Footer的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• 用CSS怎样实现进度条？一文教你三种效果

  今天给大家分享的是用CSS实现进度条的内容，本文给大家介绍了三种效果的进度条，分别是长形的，带有五个圆的线形和圆形的进度条，效果图如下，前两种实现比较简单的，这篇主要介绍圆形进度条的实现。感兴趣的朋友接下来跟随小编一起看看吧看吧。

• CSS声明弹性盒子的方式有几种，如何实现性布局

  flex布局又称为弹性布局，任何一个容器都可以指定为flex布局,这篇文章主要介绍了CSS中的flex布局,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

• 基于react实现的简易CSS扇形菜单代码是什么

  这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• HTML页面中怎么显示特殊符号，怎么避免显示出错

  在使用html进行编辑的时候，特殊符号往往会显示错误，极端情况下更可能导致网页崩溃。本文就来介绍一下如何显示特殊字符，感兴趣的可以了解一下