How to align a horizontal shape to the center?

Question

css

<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;
      }
    }
  }
}

In different places added margin: 0 auto;
text-align: center;
but the result is the same. It is desirable that then it could be done adaptively.

Answer 1

well, you need a fixed width in order for margin auto to work

Answer 2

You can, for example, like this, without knowing the width of
jsfiddle.net/cr1j431v/1
, you can also do this:

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

Answer 3

codepen.io/anon/pen/GpPOwY