水平居中

1. 使用text-align属性

使用text-align属性可以将子元素水平居中，text-align属性可以应用于父元素或子元素中。下面是一个例子：

<div style="text-align:center;">

  <h1>Hello, World!</h1>
</div>

上面的例子将h1元素水平居中，效果如下：

需要注意的是，text-align属性仅对行内元素和表格元素有效。

2. 使用margin属性

使用margin属性也可以将子元素水平居中，需要将子元素的宽度设置为固定值，并将left和right的margin设置为auto。下面是一个例子：

<div style="width: 100%; margin: 0 auto;">

  <h1>Hello, World!</h1>
</div>

上面的例子将h1元素水平居中，效果如下：

垂直居中

1. 使用table-cell属性

使用table-cell属性可以将子元素垂直居中，需要将父元素的display属性设置为table和table-cell，并将vertical-align属性设置为middle。下面是一个例子：

<div style="display: table; height: 300px;">

  <div style="display: table-cell; vertical-align: middle;">
    <p>Hello, World!</p>
  </div>
</div>

上面的例子将p元素垂直居中，效果如下：

2. 使用flex布局

使用flex布局也可以将子元素垂直居中，只需要将父元素的display属性设置为flex，并将align-items属性设置为center。下面是一个例子：

<div style="height: 300px; display: flex; align-items: center;">

  <p>Hello, World!</p>
</div>

上面的例子将p元素垂直居中，效果如下：

综合实例

下面是一个综合实例，将子元素水平和垂直居中：

<div style="height: 300px; display: flex; align-items: center; justify-content: center;">

  <p>Hello, World!</p>
</div>

上面的例子将p元素水平和垂直居中，效果如下：