Как выровнять 2 контейнера, которые лежат по центру

Question

Я хочу выровнять это:

HTML-представление

к этому, но в центре сайта: Желаемый результат

но вместо этого он идет к левому краю:

Реальность

Как я могу сделать так, чтобы это былов центре сайта?

Я пытался использовать некоторые комбинации и другие атрибуты, но результат не изменился.

.container{
    text-align: center;
    position:relative;
}

.inputArea{
    margin: auto;
    display: flow;
}
.deleteArea{
    margin:auto;
    display:inline-block;
}

<div class="container">
    <div class="inputArea" >
        <form  th:action="@{/}" method="post">
            <input   type="text" th:id="inputWord" name="inputWord" />
            <input   type="text" th:id="inputTranslation" name="inputTranslation" />
            <input   type="text" th:id="language" name="language" value="English" />
            <input   type="submit" th:id="addWord" value="add" />
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input   type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input   type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input   type="text" th:id="languageDelete" name="languageDelete" />
            <input   type="submit" th:id="deleteWord" value="delete" />
        </form>
    </div>
</div>

Что я должен изменить в своем коде для достижения желаемого результата?

Answer 1

Вот еще один способ сделать это.Вы пробовали это?

.container {
  width: 100%;
}

.container-inner {
  margin: 0 auto;
  display: table;
}

<div class="container">
  <div class="container-inner">
    <div class="inputArea" >
        <form  th:action="@{/}" method="post">
            <input   type="text" th:id="inputWord" name="inputWord" />
            <input   type="text" th:id="inputTranslation" name="inputTranslation" />
            <input   type="text" th:id="language" name="language" value="English" />
            <input   type="submit" th:id="addWord" value="add" />
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input   type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input   type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input   type="text" th:id="languageDelete" name="languageDelete" />
            <input   type="submit" th:id="deleteWord" value="delete" />
        </form>
    </div>
  </div>
</div>

Answer 2

Намерены ли вы достичь чего-то подобного?Одним из вариантов может быть использование CSS сетки ...

.container{
    text-align: center;
    position: relative;
}

.inputArea form {
    margin: auto;
	display: inline-grid;
	grid-template-columns: auto auto auto minmax(0px, 100px);
	text-align: left;
}

<div class="container">
    <div class="inputArea" >
        <form th:action="@{/}" method="post">
            <input type="text" th:id="inputWord" name="inputWord" />
            <input type="text" th:id="inputTranslation" name="inputTranslation" />
            <input type="text" th:id="language" name="language" value="English" />
	    <div><input type="submit" th:id="addWord" value="add" /></div>
        </form>
    </div>
    <div class="inputArea">
        <form th:action="@{/delete}" method="post">
            <input type="text" th:id="inputWordDelete" name="inputWordDelete" />
            <input type="text" th:id="inputTranslationDelete" name="inputTranslationDelete" />
            <input type="text" th:id="languageDelete" name="languageDelete" />
	    <div><input type="submit" th:id="deleteWord" value="delete" /></div>
        </form>
    </div>
</div>