如何制作自適應居中div？

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    border: 1px solid black;
    padding: 10px;
    width: 400px;
}

.field {
    position: relative;
}

.input {
    margin-bottom: 10px;
    width: 100%;
}

.error {
    position: absolute;
    left: 105%;
    top: 0;
    width: 200px;
}

<div class="container">
  
  <div class="box">
      <div class="field">
          <input class="input" type="text">
          <div class="error">error 1</div>
      </div>
  
      <div class="field">
          <input class="input" type="text">
          <div class="error">error 2</div>
      </div>
  
      <button>Send</button>
  </div>
  
</div>