html中对齐两个不同位置的文本框，并使它居中

在HTML中对齐两个不同位置的文本框使其居中，可以利用CSS的`flexbox`布局或者`position`属性配合`transform`。这里给出两种常见的方法：

**方法一：Flexbox布局**
假设你有两个div元素，分别包含文本框。将它们放在同一行并设置display为flex:

<div class="container">
  <div class="align-left">
    <input type="text" placeholder="左对齐">
  </div>
  <div class="align-right">
    <input type="text" placeholder="右对齐">
  </div>
</div>

.container {
  display: flex;
  justify-content: space-between; /* 居中两个文本框 */
}

.align-left, .align-right {
  width: 48%; /* 或者自适应宽度 */
}

**方法二：Positioning and Transform**
如果你不想用 Flexbox，你可以通过`position: relative`和`transform: translate`来实现：

<style>
  #left-box, #right-box {
    position: relative;
    width: 50%;
    height: 30px;
    padding: 10px;
    box-sizing: border-box;
  }
  
  #left-box input, #right-box input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  #right-box input {
    right: 0;
    transform: translateX(100%); /* 将右侧文本框向右移动其自身宽度 */
  }
</style>

<div id="left-box">
  <input type="text" placeholder="左侧文本框">
</div>
<div id="right-box">
  <input type="text" placeholder="右侧文本框">
</div>

在这个例子中，左侧文本框在默认位置，右侧文本框则通过`translateX()`将其移到了父容器之外。