пытаясь выровнять кнопку html в центре моей страницы

<p>я пытаюсь выровнять кнопку html точно по центру страницы, независимо от используемого браузера. он либо плавает влево, оставаясь в вертикальном центре, либо где-то на странице, как в верхней части страницы и т.д. </p><p>я хочу, чтобы оно было как вертикально, так и горизонтально, по центру. вот что я написал прямо сейчас:</p><pre><code><button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname </button> </code></pre>

<p>вот ваше решение: <a href="http://jsfiddle.net/7laf8/">jsfiddle</a> </p><p>по сути, поместите вашу кнопку в div с центрированным текстом:</p><pre><code><div class="wrapper"> <button class="button">button</button> </div> </code></pre><p>со следующими стилями:</p><pre><code>.wrapper { text-align: center; } .button { position: absolute; top: 50%; } </code></pre><p>есть много способов снять кожу с кошки, и это только один.</p>

<p>вы можете центрировать кнопку, не используя <code>text-align</code> на родительском <code>div</code>, просто используя <code>margin:auto; display:block;</code> </p><p>например:</p><p><strong>html</strong></p><pre><code><div> <button>submit</button> </div> </code></pre><p><strong>css</strong></p><pre><code>button{ margin:auto; display:block; } </code></pre><p><strong>смотрите в действии:</strong> <a href="http://codepen.io/maudulus/pen/avbdpl">codepen</a> </p>

<p>я действительно недавно обратился к <code>display: table</code>, чтобы придать вещам фиксированный размер, например, чтобы <code>margin: 0 auto</code> работал. сделал мою жизнь намного проще. вам просто нужно обойти тот факт, что «табличное» отображение не означает табличный html.</p><p>это особенно полезно для адаптивного дизайна, когда все становится волосатым и сумасшедшим, 50% оставляют это, а -50% становятся просто неуправляемыми.</p><pre><code>style { display: table; margin: 0 auto } </code></pre><p> <a href="http://jsfiddle.net/z52er/">jsfiddle</a> </p><p>кроме того, если у вас есть две кнопки и вы хотите, чтобы они были одинаковой ширины, вам даже не нужно знать размер каждой кнопки, чтобы они были одинаковой ширины - потому что таблица волшебным образом свернет их для вас. </p><p><img src="https://i.stack.imgur.com/5nm6w.png" alt="enter image description here"></p><p> <a href="http://%20http://jsfiddle.net/ak674/2/">jsfiddle</a> </p><p>(это также работает, если они встроены, и вы хотите расположить две кнопки по центру - попробуйте сделать это с процентами!).</p>

<p>попробуйте это довольно просто и вы не можете вносить изменения в ваш файл .css это должно работать</p><pre><code><p align="center"> <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> </p> </code></pre>

<p>вот решение, как спросили </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button></code></pre> </div> </div> </p>

<p>для меня это работало с использованием flexbox. </p><p>добавьте класс css вокруг родительского элемента div/с помощью:</p><pre><code>.parent { display: flex; } </code></pre><p>и для использования кнопки:</p><pre><code>.button { justify-content: center; } </code></pre><p>вы должны использовать родительский div, иначе кнопка не «знает», что такое середина страницы/элемента. </p>

<p>есть несколько способов исправить это. пфб два из них - </p><p><strong> 1-й путь с использованием положения: фиксированный </strong>- положение: фиксированный; позиции относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. добавление левого и верхнего значения к 50% поместит его в середину экрана.</p><pre><code> button { position: fixed; left: 50%; top:50%; } </code></pre><p><strong> 2-й путь с использованием маржи: auto </strong>-margin: 0 auto; для горизонтального центрирования, но на полях: авто; отказался работать для вертикальной центровки ... до сих пор! но на самом деле абсолютное центрирование требует только объявленной высоты и следующих стилей:</p><pre><code>button { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 40px; } </code></pre>

<p>поместите его в другой div, используйте css, чтобы переместить кнопку в середину:</p><pre><code><div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;"> <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> </div> </code></pre><p>вот пример: <a href="http://jsfiddle.net/u2b3x/">jsfiddle</a> </p>

<p>сделайте все родительские элементы шириной 100% и высотой 100% и используйте <em>display: table;</em> и <em>display: table-cell;</em>, проверьте рабочий образец.</p><p> <a href="https://github.com/helloritesh000/button-alignment-to-center">рабочая версия git</a> </p><pre><code><!doctype html> <html> <head> <style> html,body{height: 100%;} body{width: 100%;} </style> </head> <body style="display: table; background-color: #ff0000; "> <div style="display: table-cell; vertical-align: middle; text-align: center;"> <button type="button" style="text-align: center;" class="btn btn-info"> discover more </button> </div> </body> </html> </code></pre>