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%宽度代替，效果如图。

这种方法是最简单的。