主题：使用 margin 30px auto 实现居中效果

在 web 开发中，有很多时候需要将元素居中显示。其中一种方法是使用 margin 属性。本文将介绍如何使用 margin 30px auto 实现居中效果。

1. margin 属性

margin 属性用于设置元素的外边距。它有四个值，分别表示上、右、下、左四个方向的外边距大小。例如：

margin: 10px 20px 30px 40px;

表示上方外边距为 10px，右方为 20px，下方为 30px，左方为 40px。

2. margin 30px auto 实现水平居中

如果希望一个元素水平居中，可以将元素的左右外边距都设置为 auto，如下所示：

margin: 0 auto;

这种方式叫做“水平居中”。

3. margin 30px auto 实现垂直居中

如果希望一个元素垂直居中，可以将元素的上下外边距都设置为 auto，如下所示：

margin: auto 0;

这种方式叫做“垂直居中”。

4. margin 30px auto 实现水平垂直居中

将上下和左右的 margin 设置成 auto 可以实现水平垂直居中，如下所示：

margin: auto;

这个样式将元素在页面上居中显示。

5. 总结

使用 margin 30px auto 可以实现水平居中或者垂直居中，或者同时水平垂直居中。可以将此样式用于多种元素，比如图片、文本框、按钮等等，使它们在页面上更加美观和整洁。