Как выровнять форму по центру?

Question

[fleshik]

Подскажите как выровнять данную форму по центру и почему нижняя кнопка меньше остальных ведь ширина всем задана одинаковая https://jsfiddle.net/y9oqjwr1/

Answer 1

[Нікіта]

.form {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }

Answer 2

[Nekdev]

Во-первых, не указан box-sizing: border-box, поэтому инпуты были больше чем нужно, за счет паддингов и границ.
Ну и ширину лучше задать форме, а инпутам и кнопку ширину 100%. Из-за отсутствия фиксированной ширины у формы, она занимала весь экран и не центрировалась.

* {
  box-sizing: border-box;
}

.form {
  display: block;
  margin: 0 auto;
  width: 340px;
}

input {
  border-radius: 5px;
  width: 100%;
  height: 50px;
  border: 1px solid #bbbbbb;
  display: block;
  padding-left: 20px;
}
        
.btn-form {
  padding: 20px 80px;
  height: 55px;
  width: 100%;
  border: 0;
  cursor: pointer;
 }

Answer 3

[Андрей Мартынкевич]

Как выровнять форму вам уже написали.

почему нижняя кнопка меньше остальных ведь ширина всем задана одинаковая

Потому что стоит значение box-sizing: content-box. Можете прописать следующее:

*, ::after, ::before{
  box-sizing: border-box;
}

Answer 4

[Pet4ok]

Можно использовать тэг

<center>
текст
</center>

Comments

[Nekdev]

Вы из какого века?)