Как поставить блок по центру css: всё о центрировании по вертикали и горизонтали / Skillbox Media

Содержание

css3 — CSS Как поставить элемент по центру экрана, что б не влияли на другие элементы?

Задать вопрос

Вопрос задан 3 месяца назад

Изменён 3 месяца назад

Просмотрен 33 раза

Есть вот такой упрощенный пример

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}
.  block_img {
  align-self: center;
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
}
.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}

<div></div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>

Страница с контентом ограничена по размерам областью видимости экрана устройства.

Вопрос — Как задать CSS что б салатовый блок, всегда был по центру экрана (Через position:absolute, position:fixed не предлагать) а его размещение не влеяло на нижний блок со списком?

css
css3
центрирование

Ну вот так получилось через grid

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  color: #fff;
  font-family: sans-serif;
}
body:before{
  content:"";
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background-color: #00f;
  z-index: 10;
}
body:after{
  content:"";
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #00f;
  z-index: 10;
}
.block_img {
  width: 20vh;
  height: 20vh;
  background-color: #0f0;
  grid-row-start: 1;
  grid-column-start: 1;
  margin: 0 auto;
}
.testment {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 4;
  grid-row-start: 1;
  grid-column-start: 1;
}
.  block {
  margin: 2vh 2vw;
  border: 1px solid #f00;
}

<div></div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, at minima laudantium illo! Nobis minus non sit, voluptate natus id.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde recusandae assumenda debitis et vel iure provident voluptatum, dolorum sint ullam iste sequi. Qui aliquid ipsa reprehenderit cumque, sapiente, dolorum tempore iste tenetur commodi
    distinctio vero. Consectetur quis odit veritatis!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae maiores voluptates soluta quam, nam quibusdam!</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как центрировать контент по вертикали и по горизонтали с помощью Flexbox

Разработчики могут уверять вас, что центрирование контента одно из самых сложных вещей в CSS макетах. CSS Flexbox позволяет еще лучше контролировать выравнивание HTML элементов.

Сейчас мы пошагово покажем, как легко центрировать контент по вертикали и горизонтали.

Давайте поработаем с помощью этого примера:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div></div>
    </div>
  </body>
</html>

Попробуйте сами!

Здесь имеет два div элемента.

Наша задача — центрировать «small-box» id внутри «bix-box» id.

Сначала мы используем свойство width, чтобы установить width для двух блоков. Установите необходимый размер.
Потом установите высоту блоков, используя свойство height.
Установите выбранные вами цвета для div элементов, используя свойство background-color.

#big-box{
width: 200px;
height: 200px;
background-color: #666666;
}
#small-box{
width: 100px;
height: 100px;
background-color: #8ebf42;
}

Следующим шагом укажите макет с помощью свойства display. Чтобы использовать Flexbox, установите display: flex. (display: -Webkit-flex;)

#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
}

Значение flex должно использоваться вместе с расширением -webkit- для Safari, Google Chrome и Opera.

Ничто не изменится, если попробуйте этот код. Выполните следующие шаги!

Добавьте свойство align-items. Это свойство указывает вертикальное выравнивание контента внутри флекс-контейнера. Необходимо установить свойство align-items в значение «center», чтобы по вертикали центрировать контент.

#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}

Сейчас примените код и увидите, что «small-box» центрирован относительно вертикальной оси.

После того, как div элемент вертикально центрирован, можно центрировать его и по горизонтали.

Необходимо применить свойство justify-content, которое выравнивает контент по горизонтали. Устанавливаем свойство justify-content в значение «center»:

#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

Мы достигли нашей цели!

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div></div>
    </div>
  </body>
</html>

Попробуйте сами!

-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством align-items.

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flexbox-container {
      background: #cccccc;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      height: auto;
      margin: 0;
      min-height: 500px;
      }
      .flexbox-item {
      max-height: 50%;
      background: #666666;
      font-size: 15px;
      }
      .fixed {
      flex: none;
      max-width: 50%;
      }
      .box {
      width: 100%;
      padding: 1em;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div>
        <div>
          <h3>Центрирован с помощью Flexbox</h3>
          <p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали.   </p>
        </div>
      </div>
    </div>
  </body>
</html>

Попробуйте сами!

Блок остается центрированным, даже если текст меняется.

html — замена HTML5 для «центра» для блочных элементов с CSS?

спросил 8 лет, 2 месяца назад

Изменено 8 лет, 1 месяц назад

Просмотрено 3к раз

Я пытаюсь написать документ, совместимый с HTML-5, который передает Валидатор W3C: http://validator.w3.org/check.
Валидатор жалуется на каждое использование тега

, и предлагает мне использовать CSS. К сожалению, CSS не может центрировать БЛОК. горизонтально. Он может центрировать текст с помощью атрибута text-align: center, но попытки центрировать таблицы и изображения терпят неудачу.

Я прочитал «Руководство по центрированию CSS» по адресу: http://www.w3.org/Style/Examples/007/center.en.html но все его примеры также не центрируют таблицу или изображение по горизонтали (по крайней мере, в Firefox 36.0). Может ли кто-нибудь предложить, как центрировать эту таблицу?:

 

<голова>

Демонстрация ошибки центрирования CSS
</название>
<тип стиля="текст/CSS">
  .centered{ отображение: блок;
             поле слева: авто;
             поле справа: авто;
             выровнять: по центру;
             выравнивание текста: по центру;
             вертикальное выравнивание: по центру;
             горизонтальное выравнивание: по центру;
           }
</стиль>
</голова>
<тело>
  <дел>
    <таблица>
      <tr>
        <td>Пример таблицы</td>
        <td>который должен располагаться горизонтально по центру страницы.</td>
      </tr>
    </таблица>
  </div>
</тело>
</html>
 </pre><ul><li> css</li><li> html</li></ul><p> Поместите класс <code> centered </code> в таблицу <code> </code>, если вы хотите, чтобы таблица была в центре.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fuzeservers.ru/wp-content/uploads/2/c/c/2cc7151136a6cbaf503a66ec9e295d8f.jpeg' /><noscript><img loading='lazy' src='/800/600/https/fuzeservers.ru/wp-content/uploads/2/c/c/2cc7151136a6cbaf503a66ec9e295d8f.jpeg' /></noscript></p><pre> <таблица>
 </pre><p> У вас также есть некоторые недопустимые свойства в вашем классе CSS. Вам просто нужно использовать поле так же, как это</p><pre> .centered {
     поле слева: авто;
     поле справа: авто;
}
 </pre><p> Таким образом, нижняя строка ставит левое и правое поле как <code> auto </code> для элемента, который вы хотите разместить в центре.</p><p> Пример скрипки Js</p> 5</p><p> Для надежного центрирования блочного элемента выполните <strong> все </strong> из них:</p><ol><li> Укажите правое и левое поля и <br/> — это ключ —</li><li> Укажите <strong> определенную ширину </strong> , <em> например. </em> , пикселей, <strong>, а не </strong> в процентах (%).</li></ol><pre> отдел {
    поле справа: авто ;
    поле слева: авто ;
    ширина: 800 пикселей;
    }
 </pre><p> Указание полей в одну строку, <em> напр. </em>, <code> поле: авто; </code> <em> обычно работает </em>; но, чтобы оставаться в безопасности, укажите каждый, <em> т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/forum.academy/uploads/default/original/2X/2/239858645a8711ea5912f436b6dbf8f762578020.png' /><noscript><img loading='lazy' src='/800/600/https/forum.academy/uploads/default/original/2X/2/239858645a8711ea5912f436b6dbf8f762578020.png' /></noscript> е. </em> , <code> margin-right: auto ; поле слева: авто ; </code> .</p><p> Я не знаю, соответствует ли этот метод правилам, но мой опыт показывает, что он работает надежно.</p><p> Конечно, раздражает отсутствие возможности указать <code> width:</code> в процентах!</p><ul><li><p> Для центрирования блочных элементов фиксированной ширины:</p><pre> поле слева: авто;
поле справа: авто;
 </pre><pre> раздел {
  ширина: 50%;
  поле: 0 авто;
  граница: 1px сплошная #000;
} </pre><pre> <div>Я на уровне блока с фиксированным с</div> </pre></li><li><p> Для центрирования детей встроенного уровня:</p><pre> выравнивание текста: по центру;
 </pre><pre> раздел {
  выравнивание текста: по центру;
  граница: 1px сплошная #000;
}
охватывать {
  отображение: встроенный блок;
  граница: 1px сплошная #00f;
} </pre><pre> <дел>
  <span>У меня встроенный уровень</span>
</дел> </pre></li><li><p> Чтобы центрировать оболочку на уровне блока, ширина которой регулируется в соответствии с содержимым:</p><pre> дисплей: таблица;
поле слева: авто;
поле справа: авто;
 </pre><pre> раздел {
  дисплей: таблица;
  поле: 0 авто;
  граница: 1px сплошная #000;
}
р, пролет {
  граница: 1px сплошная #00f;
}
   </pre><pre> <дел>
  Я обертка с центром на уровне блоков
  <p>Я дочерний элемент уровня блока</p>
  <span>Я дочерний элемент встроенного уровня</span>
</дел> </pre></li></ul><p> Я думаю, что CSS просто неисправен/неверен.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/labs-org.ru/wp-content/uploads/2016/12/1-35.png' /><noscript><img loading='lazy' src='/800/600/https/labs-org.ru/wp-content/uploads/2016/12/1-35.png' /></noscript> Он не делает того, что написано на банке относительно центрирования. Я собираюсь продолжить использовать элемент<center>.</p> 1</p><p> Ни один из предложенных подходов не работает для элементов <math>:</p><pre> <!DOCTYPE HTML>
<html>
<голова>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Демонстрация ошибки центрирования CSS
</название>
<тип стиля="текст/CSS">
 .centered_block{ отображение: блок; /* это работает ТОЛЬКО для блочных элементов с фиксированной шириной */
            поле слева: авто;
            поле справа: авто;
          }
 .centered_text {
            выравнивание текста: по центру; /* это работает ТОЛЬКО для встроенных элементов */
          }
 .centered_inline {выравнивание текста: по центру; /* это работает ТОЛЬКО для встроенного блока */
            отображение: встроенный блок;
            выравнивание текста: по центру;
            поле слева: авто;
            поле справа: авто;
          }
</стиль>
</голова>
<тело>
  <математика>
    <мроу>
      <мфрак>
        <mrow><mi>а</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </мфрак>
    </mrow>
  </математика>
  <математика>
    <мроу>
      <мфрак>
        <mrow><mi>а</mi></mrow>
        <mrow><mi>б</mi></mrow>
      </мфрак>
    </mrow>
  </математика>
  <математика>
    <мроу>
      <мфрак>
        <mrow><mi>а</mi></mrow>
        <mrow><mi>б</mi></mrow>
      </мфрак>
    </mrow>
  </математика>
</тело>
</html>
 </pre><p> Все математические элементы отображаются с выравниванием по левому краю.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/T2W2w.png' /><noscript><img loading='lazy' src='/800/600/https/i.stack.imgur.com/T2W2w.png' /></noscript> Я предполагаю, что он вернулся к<center> … HTML5 и CSS кажутся плохо определенными / в настоящее время неправильно реализованными в современных браузерах и, похоже, неспособными центрировать эти элементы без<center> .</p><h4><span class="ez-toc-section" id="i-7"> Зарегистрируйтесь или войдите в систему </span></h4> Зарегистрируйтесь с помощью Google</p> Зарегистрироваться через Facebook</p> Зарегистрируйтесь, используя электронную почту и пароль</p><h4><span class="ez-toc-section" id="i-8"> Опубликовать как гость </span></h4> Электронная почта</p><p> Требуется, но не отображается</p><h4><span class="ez-toc-section" id="i-9"> Опубликовать как гость </span></h4> Электронная почта</p><p> Требуется, но не отображается</p></p><p> Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-28.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-28.jpg' /></noscript></p><h2><span class="ez-toc-section" id="_HTML"> Центрировать кнопку в HTML </span></h2><h3 level="2"><span class="ez-toc-section" id="i-10"> Обзор </span></h3><p> Как вы, наверное, уже знаете, CSS в основном используется для позиционирования и выравнивания элементов на веб-сайтах. Многие элементы на веб-странице выравниваются или позиционируются с использованием различных методов, таких как CSS Grids, CSS Flexbox, свойство position и т. д. Элемент веб-страницы можно напрямую позиционировать, используя различные значения положения. Но центрирование элемента требует усилий, так как в HTML не существует эмпирического правила для центрирования элемента или кнопки. Вы обнаружите, что существуют различные методы, зависящие от множества факторов, для центрирования элемента или кнопки в HTML.</p><p> В этой статье вы узнаете, как центрировать кнопку в HTML. Центрирование или выравнивание, чтобы быть конкретным, иногда бывает сложной задачей, если это делается с помощью CSS. Но существуют различные методы или приемы, следуя которым вы можете центрировать кнопку в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cs13.pikabu.ru/post_img/2019/11/09/7/og_og_1573296480213143677.jpg' /><noscript><img loading='lazy' src='/800/600/https/cs13.pikabu.ru/post_img/2019/11/09/7/og_og_1573296480213143677.jpg' /></noscript></p><h3 level="2"><span class="ez-toc-section" id="i-11"> Предпосылки </span></h3><ul><li> Встроенные и блочные элементы</li><li> CSS Flexbox</li><li> Сетка CSS</li></ul><h3 level="2"><span class="ez-toc-section" id="i-12"> Что мы создаем? </span></h3><p> В этой статье мы собираемся центрировать кнопку в HTML, используя различные методы. Некоторые из них приведены ниже с выводами.</p><p> Предположим, у вас есть кнопка в HTML-коде, и она присутствует внутри элемента div, а свойство CSS, такое как text-align: center, используется для центрирования кнопки в HTML. Теперь это единственное свойство CSS центрирует кнопку на веб-странице. Читайте дальше в статье, чтобы узнать, почему свойство text-align используется для центрирования кнопки в HTML в этом случае. На изображении ниже показан результат использования свойства CSS text-align для центрирования кнопки в HTML.</p><p> Вот результат:</p><p></p><p> Как видите, кнопка расположена горизонтально на сайте. Если вам интересно узнать больше о том, как для этого можно использовать CSS, продолжайте читать статью.</p><p> Теперь предположим, что вы удалили элемент div и в HTML-коде остался только элемент кнопки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/-3r2-pKYHbGw/XKtk4h9pezI/AAAAAAAAAWE/JkYlapNNnvYPNR9ubgLFMCg6VkGk7LYFwCLcBGAs/s1600/css.jpg' /><noscript><img loading='lazy' src='/800/600/https/1.bp.blogspot.com/-3r2-pKYHbGw/XKtk4h9pezI/AAAAAAAAAWE/JkYlapNNnvYPNR9ubgLFMCg6VkGk7LYFwCLcBGAs/s1600/css.jpg' /></noscript> В этом случае кнопка по умолчанию выравнивается по левому краю, потому что удален родительский контейнер, к которому было применено свойство CSS для центрирования этой кнопки. На изображении ниже показано, что кнопка теперь выравнивается по левому краю, когда к элементу кнопки не применяется CSS.</p><p> Вот результат:</p><p></p><p> Поскольку элемент div удален, а CSS для центрирования текста удален, кнопка снова выравнивается по левому краю. Теперь, чтобы снова центрировать кнопку, вы должны следовать другой технике, чтобы центрировать кнопку. На этот раз в HTML-коде присутствует только один элемент, поэтому присутствует только встроенный элемент, то есть элемент кнопки. Теперь вы не можете использовать свойство text-align для центрирования кнопки в HTML, потому что родительский контейнер удален. Таким образом, вы должны сделать элемент кнопки блочным элементом и установить margin: 0 auto, чтобы центрировать кнопку по горизонтали.</p><p> На изображении ниже показано, как центрировать кнопку с помощью свойства display и margin.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/x-phantom.ru/zhtml/pict/pri006.png' /><noscript><img loading='lazy' src='/800/600/https/x-phantom.ru/zhtml/pict/pri006.png' /></noscript> Не забудьте продолжить чтение статьи, чтобы узнать, когда и где использовать такие методы для центрирования кнопки в HTML.</p><p> Вот результат:</p><p></p><p> Как видно из приведенного выше вывода, кнопка снова выровнена по центру с другим подходом. Таким образом, существуют различные методы центрирования кнопки в HTML. Чтобы узнать, как работают такие методы на различных примерах, продолжайте читать статью.</p><h3 level="2"><span class="ez-toc-section" id="_HTML-2"> Как центрировать кнопку в HTML? </span></h3><p> Как мы уже обсуждали некоторые из методов с примерами и выводами выше, чтобы центрировать кнопку в HTML. В этом разделе мы подробно рассмотрим такие методы, и вы также узнаете, как можно выровнять кнопки по центру по горизонтали и вертикали.</p><p> Давайте углубимся в методы, которые можно использовать для центрирования кнопки в HTML.</p><h4 level="3"><span class="ez-toc-section" id="_div"> Центрировать кнопку в div </span></h4><p> Давайте возьмем элемент кнопки внутри контейнера div. Теперь задача состоит в том, чтобы центрировать элемент кнопки по вертикали, а затем по горизонтали.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fuzeservers.ru/wp-content/uploads/f/b/f/fbf6ed79bae0818ea0a08caf9a7db51d.png' /><noscript><img loading='lazy' src='/800/600/https/fuzeservers.ru/wp-content/uploads/f/b/f/fbf6ed79bae0818ea0a08caf9a7db51d.png' /></noscript></p><p> <strong> Как отцентрировать кнопку по вертикали </strong></p><p> В этом примере кнопка центрируется по вертикали с использованием описанной ниже техники CSS.</p><p> <strong> HTML: </strong></p><p> <strong> CSS: </strong></p><p> <strong> Вывод </strong></p><p></p><p> Давайте расшифруем, как используется CSS и почему кнопка вертикально центрирована в пример выше.</p><p> Во-первых, обратите внимание, что для родительского контейнера, т. е. элемента div, установлено значение position: relative. Для элемента кнопки установлено значение position: absolute, т. е. элемент кнопки выведен из обычного потока документов, а положение которого определяется в соответствии с его родительским контейнером, который имеет position: relative.</p><p> Свойство CSS top: 50% перемещает верхнюю часть абсолютно позиционированного элемента на 50% вниз, т.е. теперь элемент-кнопка размещается на половине высоты родителя. Обратите внимание, что здесь граница элемента кнопки размещена на 50% высоты родителя, или мы можем сказать, что верхняя часть элемента кнопки находится на 50% высоты родителя, что означает, что элемент кнопки начинается с 50% и не но по центру по вертикали.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/meZin.png' /><noscript><img loading='lazy' src='/800/600/https/i.stack.imgur.com/meZin.png' /></noscript></p><p> На изображении ниже показано, что граница элемента кнопки начинается с 50% и еще не центрирована по вертикали.</p><p></p><p> Теперь для центрирования элемента кнопки используется свойство CSS transform: translateY(-50%). Это свойство перемещает абсолютно позиционированный элемент, здесь элемент кнопки, на 50% вверх от его собственной высоты, т.е. в вертикальном центре родительского элемента. Теперь элемент кнопки полностью центрирован по вертикали, как показано в выводе выше.</p><p> <strong> Как расположить кнопку по центру по горизонтали </strong></p><p> В этом примере кнопка центрируется по горизонтали с использованием описанной ниже техники CSS.</p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод </strong></p><p></p><p> Давайте расшифруем, как используется CSS и почему в этом примере кнопка расположена горизонтально по центру.</p><p> Как объяснено в приведенном выше примере, обратите внимание, что для родительского контейнера, т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/pbs.twimg.com/media/AoYrw9OCQAApvPj.png' /><noscript><img loading='lazy' src='/800/600/https/pbs.twimg.com/media/AoYrw9OCQAApvPj.png' /></noscript> е. элемента div, установлено значение position: relative. Для элемента кнопки установлено значение position: absolute, т. е. элемент кнопки выведен из обычного потока документов, а положение которого определяется в соответствии с его родительским контейнером, который имеет position: relative.</p><p> CSS-свойство left: 50% перемещает левый край абсолютно позиционированного элемента на 50% вправо, т. е. теперь элемент-кнопка размещается в горизонтальном центре ширины родительского элемента. Обратите внимание, что здесь граница элемента кнопки размещена на 50% ширины родителя, или мы можем сказать, что левая часть элемента кнопки находится на 50% ширины родителя, что означает, что элемент кнопки начинается с 50% и не но по центру по горизонтали.</p><p> На изображении ниже показано, что граница элемента кнопки начинается с 50% и еще не центрирована по горизонтали.</p><p></p><p> Теперь для центрирования элемента кнопки используется свойство CSS transform: translateX(-50%). Это свойство перемещает абсолютно позиционированный элемент, здесь элемент кнопки, на 50% влево от его собственной ширины, т.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/forum.academy/uploads/default/original/2X/1/1dc33a6f184bc6baeb4af93f33eeedda68b08c1b.jpg' /><noscript><img loading='lazy' src='/800/600/https/forum.academy/uploads/default/original/2X/1/1dc33a6f184bc6baeb4af93f33eeedda68b08c1b.jpg' /></noscript> е. в горизонтальном центре родительского элемента. Теперь элемент кнопки полностью центрирован по горизонтали, как показано в выводе выше.</p><h4 level="3"><span class="ez-toc-section" id="_1text-align_center"> Пример 1:text-align: center </span></h4><p> Теперь давайте рассмотрим другой подход к центрированию кнопки в HTML по горизонтали. Давайте возьмем кнопку внутри контейнера div. Здесь мы собираемся центрировать элемент кнопки по горизонтали.</p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод </strong></p><p></p><p> Как показано в выходных данных выше, кнопка центрирована по горизонтали. Кнопка завернута внутрь контейнера div. Свойство CSS text-align: center используется для указания горизонтального выравнивания по центру элемента внутри блочного элемента, здесь элемент div.</p><p> Вы можете центрировать встроенные и встроенные блочные элементы по горизонтали, используя свойство text-align: center в родительском элементе.</p><h4 level="3"><span class="ez-toc-section" id="_2_margin_auto"> Пример 2: margin: auto </span></h4><p> Как обсуждалось выше, только <strong> встроенных блока </strong> и <strong> встроенных </strong> элементов можно центрировать с помощью свойства text-align: center.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/otvet.imgsmail.ru/download/176928276_67cfc1c9ca0aa3e5f11a5c8e82a8cf02_800.png' /><noscript><img loading='lazy' src='/800/600/https/otvet.imgsmail.ru/download/176928276_67cfc1c9ca0aa3e5f11a5c8e82a8cf02_800.png' /></noscript> А как же блочные элементы? Элементы блока не могут быть центрированы с помощью text-align: center, потому что ширина элементов блока равна полной ширине, если не задана статическая ширина.</p><p> Предположим, вы установили некоторую ширину для элемента кнопки и установили для его свойства display значение block. Теперь вы можете использовать описанную ниже технику для центрирования кнопки в HTML.</p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод </strong></p><p></p><p> 100 пикселей. Несмотря на то, что ширина элемента кнопки составляет 100 пикселей, рядом с ним не будет размещаться ни один другой элемент, поскольку для свойства отображения элемента кнопки задано значение блока.</p><p> Теперь вы можете центрировать элемент блочного уровня, установив для полей margin-left и margin-right значение auto, а для margin-top и margin-bottom — 0. Сокращенное свойство для использования всех четырех полей — margin: 0 auto.</p><p> Здесь margin: 0 auto устанавливает вертикальное поле равным 0 и автоматическое горизонтальное поле.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/red-book-cms.ru/wp-content/uploads/2013/08/CSS-vyirovnyat-DIV-po-tsentru.png' /><noscript><img loading='lazy' src='/800/600/https/red-book-cms.ru/wp-content/uploads/2013/08/CSS-vyirovnyat-DIV-po-tsentru.png' /></noscript> Автоматическое горизонтальное поле здесь означает, что кнопка располагается по центру горизонтально относительно родительского контейнера.</p><h4 level="3"><span class="ez-toc-section" id="_3_display_flex"> Пример 3: display: flex </span></h4><p> Теперь давайте изучим другой метод центрирования кнопки в HTML. В этом примере мы собираемся использовать CSS flexbox для центрирования кнопки в HTML.</p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод </strong></p><p></p><p> Как показано в приведенном выше примере, кнопка помещена внутрь контейнера div. Чтобы центрировать кнопку по горизонтали и вертикали, вы можете применить display: flex к родительскому контейнеру элемента кнопки. Теперь свойства CSS, такие как justify-content и align-items, используются для центрирования кнопки по горизонтали и вертикали.</p><h4 level="3"><span class="ez-toc-section" id="i-13"> Две кнопки рядом </span></h4><p> Теперь предположим, что в HTML есть две кнопки рядом. Чтобы центрировать эти две кнопки, можно использовать аналогичную технику, описанную выше. Рассмотрим две кнопки, заключенные в контейнер div, и мы будем использовать flexbox для центрирования этих двух кнопок.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ylianova.ru/800/600/https/otvet.imgsmail.ru/download/198738931_be5e255b6befb178a0b448e2181dd072_800.jpg' /><noscript><img loading='lazy' src='/800/600/https/ylianova.ru/800/600/https/otvet.imgsmail.ru/download/198738931_be5e255b6befb178a0b448e2181dd072_800.jpg' /></noscript></p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод: </strong></p><p></p><p> Как показано в выводе выше, свойство CSS display: flex применяется к родительскому контейнеру кнопки элемент. И для центрирования этих двух кнопок используются свойства CSS, такие как justify-content: center и align-items: center.</p><p> Обратите внимание, что у кнопок есть поле справа, чтобы добавить пространство между ними. Поля можно указать с помощью свойства CSS margin-right: 20px.</p><h4 level="3"><span class="ez-toc-section" id="_1_display_grid"> Пример 1: display: grid </span></h4><p> Вот еще один метод, который используется для центрирования кнопки в HTML. В этом методе мы будем использовать свойства display: grid и margin: auto в основном для центрирования кнопки в HTML.</p><p> <strong> HTML </strong></p><p> <strong> CSS </strong></p><p> <strong> Вывод </strong></p><p></p><p> Как показано на выходном изображении выше, кнопка CSS центрируется в HTML с использованием сетки. Кнопка заключена внутри контейнера div и родительского контейнера.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fs.znanio.ru/d5af0e/1a/52/5cd837bd79a2a69e938480e8b5628d65d6.jpg' /><noscript><img loading='lazy' src='/800/600/https/fs.znanio.ru/d5af0e/1a/52/5cd837bd79a2a69e938480e8b5628d65d6.jpg' /></noscript> Родительский контейнер имеет свойство CSS display: grid, так что все дочерние элементы внутри родительского контейнера следуют системе сетки.</p><p> Теперь, чтобы центрировать дочерний элемент, то есть элемент кнопки в приведенном выше примере, примените margin: auto к элементу кнопки, чтобы он был центрирован по вертикали и горизонтали. Вы также можете использовать justify-content: center и align-items: center вместе с системой сетки, чтобы центрировать кнопку или дочерний элемент по вертикали и горизонтали.</p><h3 level="2"><span class="ez-toc-section" id="i-14"> Заключение </span></h3><ul><li> Существуют различные методы центрирования кнопки в HTML.</li><li> Можно использовать такие методы, как центрирование кнопки в HTML с помощью flexbox, методы сетки в родительском контейнере.</li><li> Методы goto для центрирования кнопки в HTML — это CSS Flexbox и CSS Grids.</li><li> Вы можете центрировать встроенные и встроенные блочные элементы по горизонтали, используя свойство text-align: center в родительском элементе.</li><li> Элементы уровня блока можно центрировать, используя свойство margin: 0 auto CSS.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/thepresentation.ru/img/tmb/2/169142/b399e372d6b61f6d6dc48b0cf53b85e2-800x.jpg' /><noscript><img loading='lazy' src='/800/600/https/thepresentation.ru/img/tmb/2/169142/b399e372d6b61f6d6dc48b0cf53b85e2-800x.jpg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/css/kak-postavit-blok-po-tsentru-css-vsyo-o-tsentrirovanii-po-vertikali-i-gorizontali-skillbox-media.html" data-text="Как поставить блок по центру css: всё о центрировании по вертикали и горизонтали / Skillbox Media" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/css/kak-postavit-blok-po-tsentru-css-vsyo-o-tsentrirovanii-po-vertikali-i-gorizontali-skillbox-media.html" data-text="Как поставить блок по центру css: всё о центрировании по вертикали и горизонтали / Skillbox Media" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/css/kak-postavit-blok-po-tsentru-css-vsyo-o-tsentrirovanii-po-vertikali-i-gorizontali-skillbox-media.html" data-text="Как поставить блок по центру css: всё о центрировании по вертикали и горизонтали / Skillbox Media" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/css/kak-postavit-blok-po-tsentru-css-vsyo-o-tsentrirovanii-po-vertikali-i-gorizontali-skillbox-media.html" data-text="Как поставить блок по центру css: всё о центрировании по вертикали и горизонтали / Skillbox Media" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/osnovnye-komandy-osnovnye-komandy-linux-terminala-s-primerami-ispolzovaniya-2.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Основные команды: Основные команды Linux терминала с примерами использования</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/sozdat-kivi-valet-koshelek-kak-sozdat-koshelek-besplatno-registratsiya-onlajn.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Создать киви валет кошелек: как создать кошелек бесплатно, регистрация онлайн</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/kak-postavit-blok-po-tsentru-css-vsyo-o-tsentrirovanii-po-vertikali-i-gorizontali-skillbox-media.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='45188' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_03d918e1044e59f607082a52d1033819.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="50cc8572775793a1ffadfd3a-|49" defer></script>