центральный блок с использованием bootstrap

Question

Я пытаюсь центрировать содержимое формы.

<div class="login-container">
 <div class="center-block">
    <form action="/joinChart" method="get">
        <input name="username" id="username" type="text"><br><br>
        <input type="submit" value="enter your name">
    </form>
  </div>
</div>

в стиле. css (для центрального блока)

.center-block {
display: block;
margin-left: auto;
margin-right: auto;
 }

.element {
   . center-block();
}

и для контейнера входа в систему:

  .login-container {
position: absolute;
width: calc(100% - 20px);
max-width: 800px;
height: 500px;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
}

Но я не могу этого сделать.

Answer 1

Это можно легко сделать, например, с помощью Flexbox:

https://yoksel.github.io/flex-cheatsheet/#align -items

.center-block {
  background-color: darkgrey;
  text-align: center;
}

.login-container {
background-color: lightgrey;
  display: flex;
  justify-content: center;
}

<div class="login-container">
  <div class="center-block">
    <form action="/joinChart" method="get">
      <input name="username" id="username" type="text"><br><br>
      <input type="submit" value="enter your name">
    </form>
  </div>
</div>

Answer 2

Посмотрите на этот веб-сайт, так как он содержит несколько методов, которые вы можете использовать для центрирования вашей формы div:

https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

Answer 3

Разные браузеры требуют разных CSS. Если вы используете Google Chrome, Opera или Microsoft Edge, то ваш код должен работать. Однако, если вы используете Inte rnet Explorer, то в селекторе .center-block CSS вы также должны включить text-align : center; после полей.