Как выровнять button по центру блока?

Question

[Ilya Bobkov]

Как выровнять <button>по центру блока div?

Answer 1

[Besenn0k]

position: relative;
left: 50%;
transform: translate(-50%, 0);

Answer 2

[Руслан Баночкин]

Можно сделать вот так: blog.sk8er.name/rabota/vyravnivanie-bloka-po-centru
Идеальный и адаптивный вариант. (:

Comments

[aiba5]

Блин Руслан!

Спасибо за отличный ответ!

Наконец-то смог выставить кнопку по центру, да еще адаптивно!

Вообще СУПЕР!

THANK YOU VERY MUCH!!! :-)

[Ирина Чернова]

Если в блоке только кнопка, тогда вариант отличный. А если есть текст, тогда он и кнопка будут находиться на одно линии

Answer 3

[Vovik_alkogolik]

margin: 0 auto;
display: block;

Answer 4

[Глюкъ Виртуален]

.Absolute-Center 
{
width: 100%;
text-align: center;
}

Comments

[Besenn0k]

Очень плохой вариант, тогда будет кликабильна облась слева и справа от кнопки

[Глюкъ Виртуален]

Besenn0k, приходите когда подучите UX.

Answer 5

[Олег Черкас]

Мне помог флексбокс:

<div class="button-wrapper">
     <button>Я кнопка</button>
</div>

.button-wrapper{
	display: flex;	
	justify-content: center;	
}

Answer 6

[Alexander]

<style>
  .center { 
    text-align: center; 
  }
</style>
<div class = "center">
  <button id = "button_reg">Регистрация</button>
</div>

Comments

[KimonoVIP]

Не правильно, Если в блоке поля и подписи к ним? Допустим их нужно будет выровнять по левому краю, а кнопку по середине. С вашим кодом выровняется всё.

Answer 7

[Ilya Bobkov]

Не работает. Вот код:

<style>
.Absolute-Center 
{
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
</style>
<div class = "Absolute-Center">
<button id = "button_reg">Регистрация</button>
</div>

Comments

[KimonoVIP]

даже если выставить значения то никакой адаптивности не будет