通过定位来实现不定宽度居中显示

实现不定宽度居中显示可以使用定位来实现。下面是具体步骤：

1. 确定外层容器的宽度和高度，设置相对定位。例如：

<div class="container">
  <div class="content">
    <p>这是一段文本内容</p>
  </div>
</div>

<style>
.container {
  width: 1000px; /* 外层容器宽度 */
  height: 500px; /* 外层容器高度 */
  position: relative; /* 相对定位 */
}

.content {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 左边距离为50% */
  top: 50%; /* 上边距离为50% */
  transform: translate(-50%, -50%); /* 通过设置transform属性来使内层容器居中 */
}
</style>

1. 确定内层容器的宽度和高度，设置绝对定位，同时设置左边距离和上边距离为50%，这样就将内层容器的中心点定位在外层容器的中心位置。然后使用transform属性将内层容器往左上角移动它自身宽度和高度的一半。这样就能够将内层容器水平和垂直居中。

具体实现可以使用以下示例：

示例1：一个横向居中的图片

<div class="container">
  <img src="https://via.placeholder.com/400x200.png">
</div>

<style>
.container {
  width: 80%; /* 宽度不定，设置为80% */
  height: 200px; /* 容器高度 */
  position: relative; /* 相对定位 */
}

.container img {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 左边距离为50% */
  top: 50%; /* 上边距离为50% */
  transform: translate(-50%, -50%); /* 通过设置transform属性来使内层容器居中 */
}
</style>

示例2：一个纵向居中的文本框

<div class="container">
  <div class="content">
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
      <label for="password">密码：</label>
      <input type="password" id="password" name="password">
      <button>登录</button>
    </form>
  </div>
</div>

<style>
.container {
  width: 500px; /* 宽度 */
  height: 80%; /* 容器高度不定，设置为80% */
  position: relative; /* 相对定位 */
}

.content {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 左边距离为50% */
  top: 50%; /* 上边距离为50% */
  transform: translate(-50%, -50%); /* 通过设置transform属性来使内层容器居中 */
}
</style>

这两个示例都使用了定位技术来实现不定宽度的水平和垂直居中，你可以根据需要将宽度和高度设置为任意值。