在进行网页布局设计时，CSS居中总是一个很常见的需求。对于一般的元素居中，我们可以使用text-align和margin:auto来实现，但是对于子元素的居中就不是那么简单了。本文就来讨论一下一些子元素居中的问题。

//HTML代码
<div class="parent">
<div class="child"></div>
</div>
//CSS代码
.parent{
position: relative; //父元素定位
}
.child{
position: absolute; //子元素定位
top: 50%; //距离顶部50%
left: 50%; //距离左侧50%
transform: translate(-50%, -50%); //偏移
}

以上是一个常见的子元素居中实现方式，通过父元素设置相对定位，子元素设置绝对定位，并利用top与left设置距离顶部与左侧的百分比，这样就能让子元素进入父元素中间的位置。至于为什么要用相对定位，是因为当父容器宽度变化时，绝对定位元素的left值始终为50%。

然而，以上方法有一个致命缺陷，就是子元素的高度无法居中，如果子元素高度有变化，那么设定的top值就无法使其居中。为了解决这个问题，我们可以使用CSS3中的flex布局。

//HTML代码
<div class="parent">
<div class="child"></div>
</div>
//CSS代码
.parent{
display: flex; //弹性布局
justify-content: center; //子元素水平居中
align-items: center; //子元素垂直居中
}
.child{
/*如果需要子元素水平居中,可以添加这一段*/}
/*margin: 0 auto;*/
}

使用flex布局可以同时使得子元素水平居中与垂直居中，省去了对top和left属性的进行定位。同时，在子元素的margin属性中，也可以设置左右自动居中。

在实际开发中，还会遇到子元素内部居中的问题，例如需要让一个文本框中的文字居中。这时可以用到CSS文本属性的text-align：center，将子元素内部的文字居中，或者使用表格布局，让子元素作为表格单元格居中。

总之，在实现子元素居中时，我们可以使用CSS定位、flex布局、表格布局等方式，要根据实际需求进行选择，解决了子元素居中的问题，网页布局就更加完美和美观了。