css中子元素怎么水平居中

CSS中，如何将子元素水平居中是一个经常被使用的技巧。下面将介绍两种方法。
第一种方法：使用父元素的text-align属性
对于父元素，可以使用text-align属性来实现子元素的水平居中。
例如，如果想要将一个段落元素（p）中的文字水平居中，可以将其父元素的text-align属性设为center，如下所示：
pre {
background-color: #eee;
}
p {
text-align: center;
background-color: #ccc;
}
在这个例子中，我们设置了pre元素的背景色为#eee，用于区别代码段落与普通段落；将p元素的背景色设为#ccc，并将其text-align属性设为center，实现文字水平居中效果。
第二种方法：使用子元素的margin属性
另一种将子元素水平居中的方法是，在子元素中使用margin属性。具体来说，使用margin-left和margin-right属性，并将它们的值都设为auto，可以将子元素水平居中。
例如，如果想要将一个图片元素（img）水平居中，可以在其父元素中添加如下CSS代码：
pre {
background-color: #eee;
}
div {
background-color: #ccc;
}
img {
margin-left: auto;
margin-right: auto;
}
在这个例子中，我们设置了pre元素的背景色为#eee，用于区别代码段落与普通段落；设置了一个div元素，并将其背景色设为#ccc；将img元素的margin-left和margin-right属性都设为auto，实现图片水平居中效果。
需要注意的是，这种方法适用于子元素宽度确定的情况，如图片等。对于其他类型的子元素，需要先确定宽度再使用这种方法。
综上所述，这两种方法都可以实现子元素的水平居中效果，具体使用哪种方法取决于具体情况。