Mam divustawione na display:block( 90px heighti width) i mam w środku trochę tekstu.

Potrzebuję wyrównania tekstu w środku, zarówno pionowo, jak i poziomo.

Próbowałem text-align:center, ale nie robi części poziomej, więc próbowałem vertical-align:middle, ale to nie zadziałało.

Jakieś pomysły?

Jeśli jest to jeden wiersz tekstu i / lub obrazu, łatwo to zrobić. Po prostu użyj:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Otóż ​​to. Jeśli może to być wiele linii, jest to nieco bardziej skomplikowane. Ale są rozwiązania na http://pmob.co.uk/ . Poszukaj „wyrównania w pionie”.

Ponieważ są to zwykle hacki lub dodawanie skomplikowanych div ... Zwykle używam do tego tabeli z pojedynczą komórką ... aby uczynić to tak prostym, jak to możliwe.

Aktualizacja na 2020 r .:

Jeśli nie potrzebujesz, aby działał we wcześniejszych przeglądarkach, takich jak Internet Explorer 10, możesz używać Flexboksa. Jest szeroko obsługiwany przez wszystkie obecne główne przeglądarki . Zasadniczo kontener należy określić jako kontener elastyczny wraz z centrowaniem wzdłuż jego osi głównej i poprzecznej:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Aby określić stałą szerokość dla dziecka, która nazywa się „elementem elastycznym”:

#content {
  flex: 0 0 120px;
}

Przykład: http://jsfiddle.net/2woqsef1/1/

Aby zawinąć zawartość, jest to jeszcze prostsze: wystarczy usunąć flex: ...linię z elementu elastycznego i zostanie ona automatycznie owinięta.

Przykład: http://jsfiddle.net/2woqsef1/2/

Powyższe przykłady zostały przetestowane w głównych przeglądarkach, w tym MS Edge i Internet Explorer 11.

Jedna uwaga techniczna, jeśli chcesz go dostosować: wewnątrz elementu elastycznego, ponieważ ten element elastyczny nie jest sam w sobie elastycznym kontenerem, stary sposób CSS inny niż Flexbox działa zgodnie z oczekiwaniami. Jeśli jednak dodasz dodatkowy element elastyczny do bieżącego kontenera elastycznego, dwa elementy elastyczne zostaną umieszczone poziomo. Aby ustawić je pionowo, dodaj flex-direction: column;do elastycznego pojemnika. Tak to działa między kontenerem elastycznym a jego bezpośrednimi elementami potomnymi.

Istnieje alternatywna metoda centrowania: nie określając centerrozkładu na osi głównej i poprzecznej dla pojemnika elastycznego, ale zamiast tego określ margin: autona elemencie elastycznym, aby zajmował całą dodatkową przestrzeń we wszystkich czterech kierunkach i równomiernie rozmieszczone marginesy sprawi, że element flex zostanie wyśrodkowany we wszystkich kierunkach. Działa to z wyjątkiem sytuacji, gdy istnieje wiele elementów Flex. Ta technika działa również w MS Edge, ale nie w Internet Explorerze 11.

Aktualizacja na rok 2016/2017:

Można to zrobić częściej transformi działa dobrze nawet w starszych przeglądarkach, takich jak Internet Explorer 10 i Internet Explorer 11. Może obsługiwać wiele wierszy tekstu:

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

Przykład: https://jsfiddle.net/wb8u02kL/1/

Aby zawinąć szerokość:

W powyższym rozwiązaniu zastosowano stałą szerokość dla obszaru zawartości. Aby użyć szerokości owiniętej w folię termokurczliwą, użyj

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Przykład: https://jsfiddle.net/wb8u02kL/2/

Jeśli potrzebna jest obsługa programu Internet Explorer 10, wówczas Flexbox nie będzie działać, a powyższa metoda i line-heightmetoda będzie działać. W przeciwnym razie Flexbox wykonałby zadanie.

Typowe techniki od 2014 r .:

• Podejście 1 - transform translateX/ translateY:

  Przykład tutaj / przykład pełnego ekranu

  W obsługiwanych przeglądarkach (większość z nich) możesz użyć top: 50%/ left: 50%w połączeniu z, translateX(-50%) translateY(-50%)aby dynamicznie pionowo / poziomo wyśrodkować element.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

• Podejście 2 - metoda Flexbox:

  Przykład tutaj / przykład pełnego ekranu

  W obsługiwanych przeglądarkach ustaw displayelement docelowy na flexi użyj go align-items: centerdo centrowania w pionie i justify-content: centerdo centrowania w poziomie. Po prostu nie zapomnij dodać prefiksów dostawców w celu dodatkowego wsparcia przeglądarki ( patrz przykład ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

• Podejście 3 - table-cell/ vertical-align: middle:

  Przykład tutaj / przykład pełnego ekranu

  W niektórych przypadkach należy upewnić się, że wysokość elementu html/ bodyjest ustawiona na 100%.

  Aby wyrównać w pionie, ustaw element nadrzędny width/ heightdo 100%i dodaj display: table. Następnie do elementu podrzędnego, zmień displaysię table-celli dodać vertical-align: middle.

  Aby wyśrodkować w poziomie, możesz dodać, text-align: centeraby wyśrodkować tekst i inne inlineelementy potomne. Alternatywnie możesz użyć margin: 0 autozałożenia, że ​​element jest blockrówny.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

• Podejście 4 - absolutnie ustawione 50%od góry z przesunięciem:

  Przykład tutaj / przykład pełnego ekranu

  Takie podejście zakłada, że tekst ma znanej wysokości - w tym przypadku 18px. Wystarczy bezwzględnie ustawić element 50%od góry względem elementu nadrzędnego. Użyj margin-topwartości ujemnej stanowiącej połowę znanej wysokości elementu, w tym przypadku - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

• Podejście 5 - line-heightmetoda (najmniej elastyczna - nie sugerowana):

  Przykład tutaj

  W niektórych przypadkach element nadrzędny będzie miał stałą wysokość. Aby wyśrodkować w pionie, wystarczy ustawić line-heightwartość elementu podrzędnego równą stałej wysokości elementu nadrzędnego.

  Chociaż to rozwiązanie będzie działać w niektórych przypadkach, warto zauważyć, że nie będzie działać, gdy jest wiele wierszy tekstu - takich jak ten .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

Metody 4 i 5 nie są najbardziej niezawodne. Idź z jednym z pierwszych 3.

Za pomocą Flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Zaczerpnięte z szybkiej porady: najprostszy sposób na wyśrodkowanie elementów w pionie i poziomie

Dodaj wiersz display: table-cell;do treści CSS dla tego div.

Obsługują tylko komórki tabeli vertical-align: middle;, ale możesz nadać tej definicji [komórka tabeli] div ...

Żywy przykład jest tutaj: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Zawsze używam następującego CSS dla kontenera, aby wyśrodkować jego zawartość w poziomie i w pionie.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

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

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Zobacz to w akcji tutaj: https://jsfiddle.net/yp1gusn7/

Możesz wypróbować bardzo prosty kod:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Link do Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Daj tę klasę CSS docelowemu <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Możesz użyć flexwłaściwości u rodzica div i dodać margin:autowłaściwość do elementów potomnych:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Możesz zobaczyć więcej opcji flextutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Podejście 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Podejście 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Podejście 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

To działa dla mnie (testowane OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Możesz wybrać inne wartości niż 50%. Na przykład 25% do centrum na 25% rodzica.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Możesz wypróbować następujące metody:

1. Jeśli masz jedno słowo lub jedno zdanie liniowe, poniższy kod może załatwić sprawę.

   Umieść tekst w znaczniku div i podaj mu identyfikator. Zdefiniuj następujące właściwości dla tego identyfikatora.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Uwaga: Upewnij się, że właściwość line-height jest taka sama jak wysokość podziału.

   Wizerunek

   Ale jeśli treść zawiera więcej niż jedno słowo lub wiersz, to nie działa. Będą też chwile, gdy nie będzie można określić rozmiaru podziału w pikselach lub% (gdy podział jest naprawdę mały i chcesz, aby zawartość była dokładnie pośrodku).

2. Aby rozwiązać ten problem, możemy wypróbować następującą kombinację właściwości.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Wizerunek

   Te 3 wiersze kodu ustawiają zawartość dokładnie w środku podziału (niezależnie od wielkości wyświetlacza). „Align-pozycje: center” pomaga w pionie podczas centrowania „usprawiedliwić-content: center” pozwoli poziomo wycentrowany.

   Uwaga: Flex nie działa we wszystkich przeglądarkach. Upewnij się, że dodałeś odpowiednie prefiksy dostawcy dla dodatkowej obsługi przeglądarki.

KRATA

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Dostosowywanie wysokości linii w celu uzyskania wyrównania pionowego.

line-height: 90px;

To powinna być właściwa odpowiedź. Najczystszy i najprostszy:

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

Zastosuj styl:

position: absolute;
top: 50%;
left: 0;
right: 0;

Twój tekst byłby wyśrodkowany niezależnie od jego długości.

To działało dla mnie:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Dla mnie było to najlepsze rozwiązanie:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Naprawdę prosty kod, który działa dla mnie! Tylko jedna linia, a tekst zostanie wyśrodkowany poziomo.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Dane wyjściowe wyglądają następująco:

Proszę głosować na tę odpowiedź, jeśli działa ona tylko po to, aby poświęcić trochę czasu deweloperom szukającym łatwych rozwiązań. Dzięki! :)

Wypróbuj następujący przykład. Dodałem przykłady dla każdej kategorii: poziomej i pionowej

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>