父元素和子元素宽高不固定，如何实现水平垂直居中

可以使用flex布局来实现父元素和子元素的水平垂直居中。具体实现方法如下：

1. 父元素设置display:flex;justify-content:center;align-items:center;来实现水平垂直居中。

2. 子元素设置margin:auto;来实现水平垂直居中。

示例代码如下：

HTML代码：

<div class="parent">
  <div class="child">子元素</div>
</div>

CSS代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.child {
  margin: auto;
}

这样就可以实现父元素和子元素的水平垂直居中了。