Я пытаюсь центрировать эту форму

enter image description here

Вот мой css:

form {
  background-color: yellow;
  width: 400px;
  position: absolute;
  text-align: center;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}

Форма будет центрирована, если я избавлюсь от абсолютной позиции, однако, если я удалю абсолютную позицию, произойдет следующее

enter image description here

Не могу понять это.

0
Nick 24 Сен 2018 в 02:50

2 ответа

Лучший ответ

position: absolute выводит элемент из потока.

Если вы хотите применить margins , вы захотите использовать position: relative :

form {
  background-color: yellow;
  width: 400px;
  position: relative;
  text-align: center;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}
<form>Form</form>

Если вам нужно использовать абсолютно позиционированный элемент, вы можете использовать left в сочетании с calc() , чтобы сместить элемент на 50% минус половина его width :

form {
  background-color: yellow;
  width: 400px;
  position: absolute;
  text-align: center;
  margin-top: 5rem;
  left: calc(50% - (400px/2));
}
<form>Form</form>
2
Obsidian Age 24 Сен 2018 в 00:03

Добавьте display: inline-block; в form. И оберните его div (или другим элементом display: block;) и добавьте text-align: center в div.

Таким образом вы центрируете его без жестко заданных значений. Если ширина ваших div меняется, она будет центрирована автоматически.

div {
  margin-top: 40px;
  text-align: center;
}

form {
  background-color: red;
  display: inline-block;
}
<div>
  <form>
    input: <input/> <br>
    other: <input/> <br>  
    <button>SUBMIT</button>
  </form>
</div>
1
Turk 24 Сен 2018 в 00:24