Jak wyśrodkować tekst w pionie za pomocą CSS?

Innym sposobem (jeszcze nie wspomnianym tutaj) jest Flexbox .

Wystarczy dodać następujący kod do elementu container :

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternatywnie, zamiast wyrównywania zawartości za pomocą kontenera , flexbox może również wyśrodkować element a Flex z automatycznym marginesem gdy w kontenerze flex jest tylko jeden element flex (jak w przykładzie podane w powyższym pytaniu).

Więc aby wyśrodkować element flex zarówno w poziomie, jak i w pionie, ustaw go za pomocą margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

Uwaga: wszystko to dotyczy centrowania elementów podczas układania ich w poziomych rzędach . Jest to również domyślne zachowanie, ponieważ domyślnie wartością flex-direction jest row. Jeśli jednak elementy flex muszą być ułożone w pionowych kolumnach , to flex-direction: column należy ustawić na kontenerze, aby ustawić główną oś jako kolumnę, a dodatkowo właściwości justify-content i align-items działają teraz odwrotnie Z justify-content: center centrowaniem w pionie i align-items: center centrowaniem w poziomie)

flex-direction: column demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Ponadto, wsparcie przeglądarki obecnie jest bardzo dobry: caniuse

Dla kompatybilności między przeglądarkami dla display: flex i align-items, możesz użyć następujących opcji:

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

Możesz to łatwo zrobić, dodając następujący fragment kodu CSS:

display: table-cell;
vertical-align: middle;

Oznacza to, że Twój CSS w końcu wygląda następująco:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
  Some text
</div>

Dla odniesienia i do dodania prostszej odpowiedzi:

Czysty CSS:

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

Lub jako Mixin SASS / SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Użyj przez:

.class-to-center {
    @include vertical-align;
}

By Sebastian Ekström 's blog post / align = "left" / CSS:

Ta metoda może powodować rozmycie elementów z powodu umieszczenia elementu na "pół pikselu". Rozwiązanie tego problemu polega na ustawieniu elementu nadrzędnego na preserve-3d. jak poniżej:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Żyjemy w 2015+ i Flex Box jest obsługiwany przez każdą większą nowoczesną przeglądarkę.

To będzie sposób tworzenia stron internetowych od teraz.

Naucz się!

Wszystkie podziękowania należą się właścicielowi tego linku @ Sebastian Ekström Link; proszę przejść przez to. Zobacz go w akcji codepen . Czytając powyższy artykuł stworzyłem również Demo .

Z zaledwie trzema liniami CSS (z wyłączeniem przedrostków vendora) możemy to zrobić za pomocą transformacji: translateY Wyśrodkowuje pionowo cokolwiek chcemy, nawet jeśli nie znamy Jego Wysokości.

Transformacja właściwości CSS jest zwykle używana do obracania i skalowania elementów, ale z jego funkcja Translate możemy teraz pionowo wyrównać elementy. Zazwyczaj musi to być zrobione z bezwzględnym pozycjonowaniem lub ustawianiem wysokości linii, ale wymagają one albo znajomości wysokości elementu, albo działają tylko na tekście jednowierszowym, itp.

Więc, aby to zrobić piszemy:

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

Aby uczynić to jeszcze prostszym, możemy napisać go jako mixin z jego przedrostkami.

Flexboxy, które zostały wprowadzone w CSS3 są rozwiązaniem:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}

<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Uwaga : jeśli chcesz wyśrodkować tekst, Zastąp wiersz powyżej oznaczony jako ważny jednym z tych wierszy:

1) tylko w pionie:

margin: auto 0;

2) tylko poziomo:

margin: 0 auto;

UPDATE: jak zauważyłem, ta sztuczka działa również z siatkami (display: grid).

Elastyczne podejście

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

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

Rozwiązanie przyjęte jako odpowiedź jest idealne do użycia line-height takiej samej jak wysokość div, ale rozwiązanie to nie działa idealnie, gdy tekst jest zawinięty lub jest w dwóch wierszach.

Spróbuj tego, jeśli tekst jest zawinięty lub znajduje się w wielu wierszach wewnątrz div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Aby uzyskać więcej informacji, zobacz:

• Pionowo Wyśrodkowany Tekst Z Wieloma Liniami

• 6 metody centrowania pionowego za pomocą CSS

Spróbuj To rozwiązanie :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Zbudowany przy użyciu CSS + .

Możesz również użyć poniższych właściwości.

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

Możesz użyć poniższego fragmentu kodu jako odniesienia. Dla mnie działa jak czar:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

Wynik powyższego fragmentu kodu jest następujący:

Kod źródłowy: Jak wyśrodkować tekst w pionie za pomocą CSS? - Kod Puran

Inny sposób:

Nie ustawiaj height atrybutu div, ale zamiast tego użyj padding:, aby osiągnąć efekt. Podobnie jak wysokość wiersza, działa tylko wtedy, gdy masz jeden wiersz tekstu. Chociaż w ten sposób, jeśli masz więcej treści, tekst nadal będzie wyśrodkowany, ale sam div będzie nieco większy.

Więc zamiast iść z:

div {
  height:120px;
  line-height: 120px;
}

Możesz powiedzieć:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

To ustawi górną i dolną padding z div na 60px, a lewą i prawą padding do zera, czyniąc div 120px (plus wysokość czcionki) wysoką i umieszczając tekst pionowo wyśrodkowany w div.

Dla wszystkich Twoich potrzeb w zakresie wyrównania pionowego!

{

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Następnie dołącz go do swojego elementu:

.element{
    @include vertical-align();
}

Nie jestem pewien, czy ktoś poszedł writing-mode drogą, ale myślę, że rozwiązuje to problem czysto i maszerokie wsparcie:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Będzie to oczywiście działać z dowolnymi wymiarami, których potrzebujesz (poza 100% rodzica). Jeśli odkomenderujesz linie graniczne, pomocne będzie zapoznanie się z nimi.

Jsfiddle demo dla Ciebie do zabawy.

Obsługa Caniuse: 85.22% + 6.26% = 91.48% (nawet IE jest w środku!)

Nawet lepszy pomysł na to. Możesz też tak robić

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Dla pojedynczego wiersza tekstu (lub pojedynczego znaku) można użyć tej techniki:

To Może być używane, gdy #box ma nie stałą, wysokość względną w % .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Zobacz demo na żywo w JsBin (łatwiejsze edytowanie CSS) lub JsFiddle (łatwiejsze zmienianie wysokości ramki wyniku).

Jeśli chcesz umieścić tekst wewnętrzny w HTML, a nie w CSS, musisz zawinąć zawartość tekstową w dodatkowy element inline i edytować / Align = "left" / (I, oczywiście, content: własność powinna zostać usunięta.)
Na przykład,
<div id="box"><span>TextContent</span></div>
W takim przypadku #box::after należy zastąpić #box span.

Dla obsługi IE8 należy zastąpić :: przez :.

Prosty i wszechstronny sposób jest (jak podejście tabeli michielvoo):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display:table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Używanie tego atrybutu (lub równoważnej klasy) na znaczniku nadrzędnym działa nawet dla wielu dzieci do wyrównania:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Wypróbuj właściwość transform:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Bardzo proste i najpotężniejsze rozwiązanie do pionowego wyrównania centrum:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

Poniższy kod umieści div na środku ekranu niezależnie od rozmiaru ekranu lub rozmiaru div:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Zobacz więcej szczegółów o flex tutaj .

Widziałem poprzednie odpowiedzi i będą działać tylko dla tej szerokości ekranu(nie reagują). Aby reagować, musisz użyć flex.

Przykład:

div{ display:flex; align-item:center;}

Spróbuj użyć następującego kodu:

display: table-cell;
vertical-align: middle;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}

<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

Chciałbym tylko rozszerzyć odpowiedź od @ michielvoo w celu uwolnienia potrzeby wzrostu linii i oddychania wysokości div. Jest to w zasadzie tylko uproszczona wersja w ten sposób:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

Uwaga: skomentowana część css jest potrzebna do fixed-height uzupełnienia div.

Potrzebowałem rzędu klikalnych słoni, wyśrodkowanych pionowo, ale bez użycia tabeli, aby ominąć jakieś dziwactwa z Internet Explorera 9.

W końcu znalazłem najładniejszy CSS (dla moich potrzeb) i jest świetny z Firefox, Chrome i Internet Explorer 11. Niestety Internet Explorer 9 nadal się ze mnie śmieje...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

oczywiście nie potrzebujesz granic, ale mogą pomóc ci zobaczyć, jak to działa.

Ustaw go w button zamiast div, Jeśli nie zależy ci na małym wizualnym efekcie 3D.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

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

Dodaj ten mały kod do właściwości CSS twojego elementu. To jest niesamowite. Spróbuj!

Nowsze przeglądarki obsługują teraz funkcję CSS calc. Jeśli kierujesz te przeglądarki, możesz zajrzeć do zrobienia czegoś takiego:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

Kluczem jest użycie style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" wewnątrz absolutnego lub relatywnie położonego nadrzędnego div.

Gdziekolwiek chcesz styl pionowo środkowy oznacza, że możesz spróbować display:table-cell i vertical-align:middle.

Przykład:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>

Absolutne pozycjonowanie i rozciąganie

Tak jak w powyższej metodzie, ta zaczyna się od ustawienia położenia na elementach nadrzędnych i podrzędnych odpowiednio jako względne i absolutne. Od tego momentu rzeczy się różnią.

W poniższym kodzie po raz kolejny użyłem tej metody do wyśrodkowania dziecka zarówno w poziomie, jak i w pionie, chociaż możesz użyć metody tylko do wyśrodkowania w pionie.

Html

<div id="parent">
    <div id="child">Content here</div>
</div>

Css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Pomysł z tym metoda polega na tym, aby element potomny rozciągał się do wszystkich 4 Krawędzi, ustawiając górne, dolne, prawe i lewe wartości na 0. Ponieważ element dziecięcy jest mniejszy od elementu rodzica, nie może osiągnąć wszystkich 4 Krawędzi.

Ustawienie auto jako marginesu na wszystkich 4 stronach powoduje jednak, że przeciwne marginesy są równe i wyświetla nasz dziecięcy div w centrum nadrzędnego div.

Niestety powyższe nie zadziała w IE7 i poniżej i podobnie jak poprzednia metoda zawartość wewnątrz child div może urosnąć zbyt duży, powodując jego ukrycie.