使用display:inline-block居中没有宽度的元素

当一个元素垂直方向完全居中，并且这个元素自身没有固定宽度的时候，可以使用display:inline-block属性以及text-align:center属性来实现。

步骤如下：

1.将要居中的元素设置为inline-block元素，并且设置vertical-align: middle属性，使其垂直方向居中。同时将父级元素设置为text-align: center，这样子元素就可以水平居中。

<div class="parent">
    <span class="child">测试文本</span>
</div>

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
}

2.如果想要让元素在父元素中居中，可以将父元素的高度设置为与子元素高度一致，这样就可以垂直居中了。代码如下：

<div class="parent">
    <span class="child">测试文本</span>
</div>

.parent {
    background-color: #aaaaaa;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
}

通过上述方法，我们可以轻松实现没有固定宽度的元素水平垂直居中。

示例1：

假设我们想要实现给定的button标签在不设置固定宽度和高度的情况下居中显示，我们可以这样做：

<div class="parent">
    <button class="child">按钮</button>
</div>

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px;
    font-size: 16px;
}

上述代码中，我们给父容器元素设置了text-align:center属性，给子元素（button标签）设置了display:inline-block、vertical-align:middle属性。这样我们就可以实现水平和垂直居中了。

示例2：

假设我们有一张图片，希望在不设置固定宽度和高度的情况下，使图片居中显示。我们可以这样实现：

<div class="parent">
    <img class="child" src="example.jpg" alt="例子">
</div>

.parent {
    background-color: #aaaaaa;
    height: 400px;
    line-height: 400px;
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
}

上述代码中，我们给图片的父元素设置了固定高度及line-height来实现垂直居中，同时设置了display:inline-block、vertical-align:middle属性来实现水平居中。这样我们就可以实现水平和垂直居中了。