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

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.

Jest mała magia z CSS3 flexboxes:

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 60%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
p {
    text-align: center;
    font-family: Cantarell, Calibri;
    font-size: 15px;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}

<section>
    <p>
        I'm a centered box!<br/>
        Flexboxes are great!
    </p>
</section>

Wskazówka : Zastąp linię oznaczoną powyżej jako "kluczowa część" jedną z tych linii, jeśli chcesz wyśrodkować tekst:

1. Tylko w pionie:

   margin: auto 0;
   

2. Tylko poziomo:

   margin: 0 auto;
   

Jak zauważyłem, ta sztuczka działa również z siatkami (tj. 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>

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-items:center; }

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 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:

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

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

Oto kolejna opcja za pomocą flexbox.

HTML

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

Wynik

Oto świetny artykuł o centrowaniu w css. check it out https://ishadeed.com/article/learn-css-centering/

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 120 pikseli (plus wysokość czcionki) wysoką i umieszczając tekst pionowo wyśrodkowany w div.

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 Internet Explorer jest do środka!)

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();
}

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 edytuj #box::after, aby dopasować. (I, oczywiście, content: własność powinna zostać usunięta.)

Na przykład, <div id="box"><span>TextContent</span></div>. W takim przypadku {[3] } należy zastąpić #box span.

Dla obsługi przeglądarki Internet Explorer 8 należy zastąpić :: przez :.

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>

Prosty i wszechstronny sposób jest (jako Michielvoo ' s Tabela):

[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, aby wyrównać:

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

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 .

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, taka jak ta:

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.

Możesz użyć metody pozycjonowania w CSS:

Sprawdź wynik tutaj....

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Mam nadzieję, że ty też skorzystasz z tej metody.

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>

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 czterech krawędzi, ustawiając górne, dolne, prawe i lewe wartości na 0. Ponieważ element potomny jest mniejszy od elementu rodzica, nie może on osiągnąć wszystkich czterech krawędzi.

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

Niestety powyższe nie będzie działać w Internet Explorerze 7 i poniżej, i podobnie jak poprzednia metoda zawartość wewnątrz podrzędnego modułu div może być zbyt duża, powodując jej ukrycie.

.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.