Как выровнять горизонтальную форму по центру?

Question

[Alexander]

<div class="content">
        <div class="order">
            <div class="order-content">
                <h1 class="text-center">Умная бухалтерия от "0" рублей! <br>
                    ...финансовая прочность Вашего бизнеса!
                </h1>
                <form action="#">
                    <ul>
                        <li><input type="text"></li>
                        <li><input type="text"></li>
                        <li><button>Заказать</button></li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

LESS :

div.order {
  color: white;
  background-image: url("../images/Bitmap%20Copy%206.png");
  div.order-content {
    background-color: rgba(126, 180, 224, 0.65);
  }
  h1 {
    padding-top: 200px;
  }
  form {
    padding-top: 75px;
    padding-bottom: 200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    ul {
      li {
        float: left;
      }
    }
  }
}

В разных местах добавлял margin: 0 auto;
text-align: center;
но результат один и тот же. Желательно чтобы потом можно было сделать адаптивно.

Answer 1

[Павел]

ну надо фиксированная ширина для того чтоб работал margin auto

Answer 2

[Дмитрий]

для form задайте max-width: 500px; <-- Ваша ширина

jsfiddle.net/soledar10/q3bzepcf

Answer 3

[Михаил Чирский]

Можно например так, не зная ширины
jsfiddle.net/cr1j431v/1
еще можно так:

.form {
left: 50%;
position: absolute;
transform: translateX(-50%);
}

Comments

[Михаил Чирский]

+ в этом способе, что также можно и по вертикале выровнять по центру, минус если использовать много где transform, производителность страдает, от 1-2 форм ничего не будет, ну если будет что то динамически генерится в больших кол-вах очень скажется

Answer 4

[Александр Зачиналов]

codepen.io/anon/pen/GpPOwY