как центрировать форму в начальной загрузке 3

<p>как я могу центрировать мою форму входа? я использую колонку начальной загрузки, но она не работает.</p><p>вот мой код:</p><pre><code><div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-6"> <h2>log in</h2> <div> <table> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </table> </div> </div> </div> </div> </code></pre>

<p>простой способ добавить </p><pre><code>.center\_div{ margin: 0 auto; width:80% /* value of your choice which suits your alignment */ } </code></pre><p>вам класс <code>.container</code>. добавьте <code>width:xx %</code> к нему, и вы получите идеально центрированный div!</p><p>например:</p><pre><code><div class="container center\_div"> </code></pre><p>но я чувствую, что по умолчанию <code>container</code> находится в центре bs!</p>

<p>есть простой способ сделать это в начальной загрузке. всякий раз, когда мне нужно сделать центр div на странице, я делю все столбцы на 3 (общее количество столбцов начальной загрузки = 12, разделенное на 3 >>> 12/3 = 4). деление на четыре дает мне три столбца. затем я положил мой div в средней колонке. и вся эта математика выполняется следующим образом:</p><pre><code><div class="col-md-4 col-md-offset-4">my div here</div> </code></pre><p>col-md-4 создает один столбец из 4 столбцов начальной загрузки. скажем, это основной столбец. col-md-offset-4 добавить один столбец (шириной 4 столбца начальной загрузки) с обеих сторон основного столбца.</p>

<p>всего столбцов в строке должно быть до 12. таким образом, вы можете сделать col-md-4 col-md-offset-4. таким образом, вы разбиваете свои столбцы на 3 группы по 4 столбца в каждой. прямо сейчас у вас есть форма с 4 столбцами со смещением на 6, поэтому вы получаете только 2 столбца с правой стороны формы. вы также можете сделать col-md-8 col-md-offset-2, который даст вам 8-столбцовую форму с 2 столбцами, каждый из которых имеет пространство слева и справа или col-md-6 col-md-offset-3 (6-столбцовая форма с 3 колонками на каждой стороне) и т. д.</p>

<p>используйте центрированный класс со смещением-6, как показано ниже.</p><pre><code><body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </code></pre><p></p>

<p>полагаю, вы пытаетесь центрировать форму по горизонтали и вертикали относительно любого контейнера div.</p><p>вам не нужно использовать бутстрап для этого. просто используйте популярный метод (ниже), чтобы центрировать форму.</p><pre><code>.container{ position relative; } .form{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </code></pre>

<p>используйте <code>d-flex</code> в классе <code>container</code>, а затем добавьте <code>justify-content-center</code> и <code>align-items-center</code>.</p><pre><code><div class="d-flex justify-content-center align-items-center container "> <div class="row "> <form action=""> <div class="form-group"> <label for="inputusername" class="control-label">enter username</label> <input type="email" class="form-control" id="inputusername" aria-labelledby="emailnotification"> <small id="emailnotification" class="form-text text-muted">enter valid email id</small> </div> <div class="form-group"> <label for="inputpassword" class="control-label">enter password</label> <input type="password" class="form-control" id="inputpassword" aria-labelledby="passwordnotification"> </div> </form> </div> </div> </code></pre>

<p>просто используйте центральный тег:</p><p><code><center>stackoverflow centered</center></code></p>