只用margin auto完成水平竖直方向

使用`margin: auto;`属性通常用于在网页设计中居中元素。当元素的`margin`设置为`auto`时，浏览器会自动调整元素的外边距，使得元素水平居中。若要实现元素的水平和垂直居中，可以结合使用`margin: auto;`和一些其他CSS属性，例如`position`和`transform`属性。以下是一个简单的实现方式：

1. 将元素的`position`属性设置为`absolute`或者`fixed`，这样元素可以脱离常规文档流。
2. 使用`top: 0; left: 0; right: 0; bottom: 0;`将元素的位置约束在其父元素内。
3. 设置`margin`为`auto`，浏览器会在上下左右都应用等同的外边距，实现元素的居中。
4. 为了垂直居中，可以使用`transform: translate(-50%, -50%);`，这样元素会相对于自身大小的一半进行移动。

以下是相应的CSS代码示例：

.parent {
  position: relative; /* 父元素需要是相对定位或绝对定位 */
}

.child {
  position: absolute; /* 或者使用 fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  /* 以下为垂直居中设置 */
  width: 50%; /* 示例宽度 */
  height: 50%; /* 示例高度 */
  transform: translate(-50%, -50%);
}

然后，HTML结构如下：

<div class="parent">
  <div class="child">需要居中的内容</div>
</div>

需要注意的是，这种方法要求父元素的尺寸必须已知，或者父元素至少有`position`属性不是`static`。