Pytanie Jak wycentrować tekst w pionie za pomocą CSS?


Mam element div, który zawiera tekst, i chcę wyrównać zawartość tego div pionowo centrum.

Oto mój styl div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Jaki jest najlepszy sposób na zrobienie tego?


1811
2018-01-14 21:25


pochodzenie


możliwy duplikat Jak wyśrodkować tekst w pionie za pomocą css - leonbloy
możliwy duplikat Najlepszy sposób na wyśrodkowanie elementu <div> na stronie w pionie i poziomie? - Dan Dascalescu
Referencje W3C: w3.org/Style/Examples/007/center.en.html - nu everest
Nowoczesny sposób: wykorzystanie zgiąć - Mistalis
Fragmenty kodu na tej stronie będą działać: codepuran.com/web-designing/... - Akshay Pethani


Odpowiedzi:


Możesz spróbować tego podstawowego podejścia:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Działa to jednak tylko dla pojedynczego wiersza tekstu, ponieważ ustawiamy wysokość linii na taką samą wysokość jak zawierający element pola.


Bardziej wszechstronne podejście

To jest inny sposób wyrównania tekstu w pionie. To rozwiązanie będzie działać dla pojedynczej linii i wielu linii tekstu, ale nadal wymaga pojemnika o stałej wysokości:

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>

CSS tylko rozmiary <div>, pionowo centrum wyrównuje <span> przez ustawienie <div>wysokość linii równą wysokości i sprawia, że <span> blok wbudowany z vertical-align: middle. Następnie ustawia wysokość linii z powrotem na normalną dla <span>, więc jego zawartość będzie płynęła naturalnie wewnątrz bloku.


Symulowanie wyświetlania tabeli

I tu jest inna opcja, która może nie działać na starszych przeglądarki, które nie obsługują display: table i display: table-cell (w zasadzie po prostu Internet Explorer 7). Za pomocą CSS symulujemy zachowanie tabeli (ponieważ tabele obsługują wyrównanie w pionie), a kod HTML jest taki sam jak w drugim przykładzie:

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>


Korzystanie z pozycjonowania bezwzględnego

Technika ta wykorzystuje ustawienie pozycjonowane absolutnie górą, dolną, lewą i prawą do 0. Zostało to opisane bardziej szczegółowo w artykule w Smashing Magazine, Absolutne poziome i pionowe centrowanie w CSS.


2452
2018-03-06 08:15



Dzieje się nie tak, jeśli div lub tekst ulegnie zmianie lub zostanie dodana większa zawartość. - Rob
Ale tak właśnie powiedział, jeśli wiesz, ile tekstu użyjesz w pełni akceptowalnym ... rozwiązanie poniżej jest jednak bardziej elastyczne - acSlater
Tylko trzecie podejście działa dobrze w moim Firefoksie 22.0, jednak nie działa we wszystkich przeglądarkach. Pierwsze 2 podejścia przestają działać poprawnie, gdy zmienię wysokość dla elementu div - YMC
Jak osiągnąć ten sam cel, gdy wysokość div jest ustawiona na: "height: 100%;" ? - Fedor
The table-cell technika jest całkiem fajna, ale zawartość jest następnie zmieniana, aby pasowała do kontenera nadrzędnego. Oto niesamowita technika z CSS Tricks, wykorzystująca pseudoelement before: css-tricks.com/centering-in-the-unknown . Zawartość nie jest zmieniana w ten sposób, ale działa tylko w IE8 +. - Ian Campbell


Innym sposobem (nie wspomniano tutaj jeszcze) jest Flexbox.

Po prostu dodaj następujący kod do pojemnik element:

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

Demo Flexbox 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 dopasowywać zawartość za pomocą pojemnik, Flexbox może również wyśrodkować a pozycja flex z automatyczny margines  gdy w elastycznym pojemniku znajduje się tylko jeden element elastyczny (jak przykład podany w pytaniu powyżej).

Aby wyśrodkować element flex, zarówno w poziomie, jak iw pionie, wystarczy go ustawić 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>

NB: Wszystkie powyższe zasady dotyczą elementów centrujących podczas układania ich poziome rzędy. Jest to również zachowanie domyślne, ponieważ domyślnie jest to wartość dla flex-direction jest row. Jeśli jednak elementy elastyczne muszą być rozmieszczone w pionowe kolumny, następnie flex-direction: column należy ustawić na kontenerze, aby ustawić oś główną jako kolumnę i dodatkowo justify-content i align-items właściwości teraz działają na odwrót z justify-content: center centrowanie w pionie i align-items: center centrowanie w poziomie)

flex-direction: column próbny

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

Dobre miejsce na rozpoczęcie z Flexbox, aby zobaczyć niektóre z jego funkcji i uzyskać składnię dla maksymalnej obsługi przeglądarki flexyboksy 

Obsługa przeglądarek w dzisiejszych czasach jest bardzo dobra: mogę uzyć

Dla zgodności z różnymi przeglądarkami dla display: flex i align-itemsmożesz użyć:

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;

960
2018-01-14 21:29



Tabela wsparcia Flexbox - user
+1 działa to dobrze, gdy elementy div zajmują całą szerokość ekranu - Andrew Bringaze
To również działa dobrze dla mnie, reszta powyższego nie działa na mojej stronie. Ale studio graficzne nie rozpoznaje display: flex. - Antonio Ooi
IE = nigdy nie możemy mieć fajnych rzeczy - Andrew Hoffman
TO JEST BOMBA !!!! Działa to jak boss w przeglądarkach Chrome i Android Chrome. - Frank


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

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


110
2017-10-25 18:12



Wygląda na to, że zabija to atrybuty marginesu. - Tim
Zauważ, że to rozwiązanie nie obsługuje IE7 - mrtsherman
@mrtsherman Lub raczej IE7 nie obsługuje tego rozwiązania. ;-) - James McLaughlin
@Costa - Być może będziesz musiał również unieść div rodziców, jeśli pływasz coś wewnątrz tego div ... sprawdź stackoverflow.com/questions/2062258/... - Ian Campbell
To wyłącza min-heigth. - Penguin


Dla odniesienia i dodać prostszą odpowiedź:

Czysty CSS:

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

Lub jako MixSS SASS / SCSS:

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

Używany przez:

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

Autor posta Sebastiana Ekströma Wyrównanie w pionie czegokolwiek z 3 liniami CSS:

Ta metoda może powodować rozmycie elementów z powodu umieszczenia elementu na "półpikselu". Rozwiązaniem tego problemu jest ustawienie elementu nadrzędnego na zachowanie-3d. Podobnie jak następujące:

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

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

Będzie to sposób, w jaki tworzone są strony internetowe.

Naucz się tego!


97
2017-08-11 11:59



Czysty CSS: zrobił mi sztuczkę, ale jakoś musiałam użyć absolute pozycjonowanie .. - d4Rk
Miałem ten sam problem co @ d4Rk. Mój (blokowy) pojemnik miał względne położenie i wysokość, a przedmiot wymagający centrowania w pionie (obraz) musiał być bezwzględnie pozycjonowany. Co za skomplikowany / prosty problem !! Mamy nadzieję, że w następnej wersji CSS pojawi się prosta / prosta poprawka. - Vanessa King


Cały kredyt trafia do tego właściciela linku @Sebastian Ekström Połączyć; proszę przejść przez to. Zobacz to w akcji kodepen. Czytając powyższy artykuł również stworzyłem skrzypce demo.

Z trzema liniami CSS (bez prefiksów dostawców) możemy to zrobić za pomocą transformacji: translateY wertykalnie centruje to, co 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 dzięki funkcji translateY możemy teraz wyrównywać elementy w pionie. Zwykle trzeba to zrobić z bezwzględnym pozycjonowaniem lub ustawianiu wysokości linii, ale wymagają one albo znajomości wysokości elementu, albo działają tylko na tekstach jednoliniowych itp.

Tak więc, aby to zrobić, piszemy:

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

To wszystko, czego potrzebujesz. Jest to technika podobna do metody pozycji bezwzględnej, ale z tym, że nie musimy ustawiać żadnej wysokości na elemencie lub pozycji-właściwości na obiekcie nadrzędnym. Działa od razu po wyjęciu z pudełka, nawet w Internet Explorer 9!

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


49
2017-12-13 20:09



Zrobiłem minimalne testy, ale wydaje mi się, że działa to dla mnie! - Iain Collins
zmieniając rozmiar czcionki przesuwa się po całym miejscu - Jon49


Flexboxy wprowadzone w CSS3 to rozwiązanie:

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 linię powyżej oznaczoną jako ważną dla jednej z tych linii:

1) Tylko pionowo:

margin: auto 0;

2) Tylko w poziomie:

margin: 0 auto;

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


22
2017-08-28 10:11



Czy mógłbyś wyjaśnić, dlaczego flex ma taki efekt w tym przypadku w centrowaniu akapitu? - elena
@elena W rzeczywistości nie wiem dokładnie dlaczego, odkryłem, kiedy próbowałem. Byłoby to jednak rozważane dla nowszych wersji CSS. Na przykład, jeśli zmienisz wyświetlanie na siatkę w tym przypadku, będzie on pracował tak samo jak Flexbox. Myślę, że siatki i moduły flexbox mają nowe funkcje, które rekompensują poprzednie błędy CSS; a ta sztuczka jest jedną z nich. - MAChitgarha


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>


13
2018-06-29 09:26





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

Wypróbuj tę, jeśli tekst jest zawijany lub znajduje się w wielu liniach wewnątrz elementu div.

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

Więcej informacji można znaleźć w:


13
2018-04-15 08:28





Możesz także użyć poniższych właściwości.

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

9
2017-12-01 18:06



Dzięki "satwik boorgula", nie sądzę, że masz problemy z kodem, może jest jakiś konflikt w moim kodzie. Testuję przy pomocy tego kodu: <div id = "topper" class = "container"> <span> Twoja treść! </ Span> </ div> Ale może zostać naprawiony przez użycie kodu jako "michielvoo" wspomnianego powyżej. - Masa S-AiYa


Próbować 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 za pomocą CSS +.


9
2018-05-28 07:41