текста - выровнять текст по центру картинки css




Как вертикально центрировать div для всех браузеров? (20)

Я хочу div вертикально с помощью CSS. Мне не нужны таблицы или JavaScript, но только чистый CSS. Я нашел некоторые решения, но им не хватает поддержки Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Как я могу div вертикали во всех основных браузерах, включая Internet Explorer 6?


Решение Flexbox

Заметки
1. Родительскому элементу присваивается имя класса.
2. Добавьте префиксы flex vendor, если это необходимо вашим поддерживаемым браузерам .

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


Центрирование только по вертикали

Если вы не заботитесь об Internet Explorer 6 и 7, вы можете использовать технику, которая включает два контейнера.

Внешний контейнер:

  • должен иметь display: table;

Внутренний контейнер:

  • должен иметь display: table-cell;
  • должен иметь vertical-align: middle;

Поле содержимого:

  • должен иметь display: inline-block;

Вы можете добавить любой контент, который вы хотите в поле содержимого, не заботясь о его ширине и высоте!

Демо - версия:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Смотрите также эту скрипку !

Центрирование по горизонтали и по вертикали

Если вы хотите центрировать как по горизонтали, так и по вертикали, вам также потребуется следующее.

Внутренний контейнер:

  • должен иметь text-align: center;

Поле содержимого:

  • следует перенастроить горизонтальное выравнивание text-align: left; например, text-align: left; или text-align: right; , если вы хотите, чтобы текст был центрирован

Демо - версия:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Смотрите также эту скрипку !


Еще один, который я не вижу в списке:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Кросс-браузер (включая Internet Explorer 8 - Internet Explorer 10 без хаков!)
  • Отзывчивая с процентами и min- / max-
  • Центрируется независимо от заполнения (без размера коробки!)
  • height должна быть объявлена ​​(см. Переменная высота )
  • Рекомендуемое overflow: auto настроек overflow: auto предотвращение overflow: auto содержимого (см. Переполнение)

Источник: абсолютное горизонтальное и вертикальное центрирование в CSS


К сожалению - но не удивительно - решение сложнее, чем хотелось бы. К сожалению, вам нужно будет использовать дополнительные div вокруг div, который вы хотите вертикально центрировать.

Для браузеров, совместимых со стандартами, таких как Mozilla, Opera, Safari и т. Д., Вам нужно установить внешний div для отображения в виде таблицы, а внутренний div будет отображаться как таблица-ячейка, который затем может быть центрирован по вертикали. Для Internet Explorer вам нужно поместить внутренний div абсолютно внутри внешнего div, а затем указать верхнюю часть как 50% . Следующие страницы хорошо объясняют эту технику и предоставляют некоторые примеры кода:

Существует также метод вертикального центрирования с использованием JavaScript. Вертикальное выравнивание содержимого с помощью JavaScript и CSS демонстрирует его.


Не отвечает за совместимость с браузером, но также упоминает новую Grid и не так новую функцию Flexbox.

сетка

From: Mozilla - Grid Documentation - выравнивание по вертикали

Поддержка браузера: поддержка браузера Grid

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Поддержка браузера: поддержка браузера Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Ниже приведено лучшее решение, которое я мог бы построить для вертикального и горизонтального размещения фиксированной ширины и гибкости . Он был протестирован и работает для последних версий Firefox, Opera, Chrome и Safari.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Просмотр рабочего примера с динамическим контентом

Я построил некоторый динамический контент, чтобы проверить гибкость и хотел бы знать, есть ли у кого-нибудь какие-либо проблемы с ним. Он должен хорошо работать и для центрированных наложений - лайтбоксов, всплывающих окон и т. Д.


После многих исследований я наконец нашел окончательное решение. Он работает даже для плавающих элементов. Просмотреть исходный код

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Просто сделайте это: добавьте класс в свой div :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

И прочитайте эту статью для объяснения. Примечание. Height необходима.


Самый простой способ - это следующие 3 строки CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

Ниже приведен пример:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>



Современный способ flexbox элемент по вертикали - использовать flexbox .

Вам нужен родитель, чтобы определить высоту и ребенка в центре.

В приведенном ниже примере центр div будет находиться в центре вашего браузера. Что важно (в моем примере) - установить height: 100% на body и html а затем min-height: 100% на ваш контейнер.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>


Содержимое можно легко центрировать, используя flexbox. Следующий код показывает CSS для контейнера, внутри которого содержимое должно быть центрировано:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Теперь решение flexbox - очень простой способ для современных браузеров, поэтому я рекомендую это для вас:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


Три строки кода с использованием transform работают практически в современных браузерах и Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Я добавляю этот ответ, так как обнаружил некоторую неполноту в предыдущей версии этого ответа (и не позволит мне просто комментировать).

  1. 'position' relative испортил стиль, если текущий div находится в теле и не имеет контейнера div. Однако «фиксированный», похоже, работает, но он, очевидно, фиксирует контент в центре области просмотра

  2. Также я использовал этот стиль для центрирования некоторых оверлейных div и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно, проблема рендеринга. Но добавление только минимального дополнения, чтобы некоторые из них отображали его правильно. Chrome и Internet Explorer (на удивление) отображали ящики без необходимости заполнения


Это всегда, куда я иду, когда я должен вернуться к этой проблеме .

Для тех, кто не хочет совершать прыжок:

  1. Укажите родительский контейнер как position:relative или position:absolute .
  2. Укажите фиксированную высоту на дочернем контейнере.
  3. Установить position:absolute и top:50% на дочернем контейнере для перемещения сверху вниз до середины родителя.
  4. Установите margin-top: -yy, где yy - половина высоты дочернего контейнера для смещения элемента вверх.

Пример этого в коде:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Это решение работало для меня, если у вас есть элемент блока (например). Я использовал цвета, чтобы сделать решение более четким.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Демо-версия JSFiddle


Я думаю, что надежное решение для всех браузеров без использования flexbox - «align-items: center;» представляет собой комбинацию отображения: table и vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/


Я использую это. Он работает в Internet Explorer 8 и более поздних версиях:

height:268px - для display:table действует как min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>


Я сделал это с этим (измените ширину, высоту, верхний край и margin-left соответственно):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>




centering