Jak wyśrodkować element w poziomie i pionie
Próbuję wyśrodkować zawartość kart w pionie, ale kiedy dodam styl CSS display:inline-flex
, poziome wyrównanie tekstu znika.
Jak mogę wyrównać tekst x i y dla każdej z kart?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
23 answers
-
Podejście 1 -
transform
translateX
/translateY
:Przykład Tutaj / Przykład Pełnoekranowy
W obsługiwanych przeglądarkach (większość z nich), można użyć
top: 50%
/left: 50%
w połączeniu ztranslateX(-50%) translateY(-50%)
aby dynamicznie wyśrodkować element w pionie/poziomie.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
-
Podejście 2-Metoda Flexbox:
Przykład Tutaj / Pełne Przykład Ekranu
W obsługiwanych przeglądarkach Ustaw
display
docelowego elementu naflex
i użyjalign-items: center
do centrowania pionowego ijustify-content: center
do centrowania poziomego. Po prostu nie zapomnij dodać przedrostków dostawcy dla dodatkowej obsługi przeglądarki (zobacz przykład).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
-
Podejście 3 -
table-cell
/vertical-align: middle
:Przykład Tutaj / Pełny Ekran Przykład
W niektórych przypadkach należy upewnić się, że
html
/body
Wysokość elementu jest ustawiona na100%
.Dla wyrównania pionowego, Ustaw element nadrzędny
width
/height
do100%
i dodaćdisplay: table
. Następnie dla elementu potomnego Zmieńdisplay
natable-cell
i dodajvertical-align: middle
.Do poziomego centrowania można dodać
text-align: center
, aby wyśrodkować tekst i inne elementy potomneinline
. Alternatywnie można użyćmargin: 0 auto
, zakładając, że element jestblock
poziom.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
-
Podejście 4-absolutnie ustawione
50%
od góry z przesunięciem:Przykład Tutaj / Przykład Pełnoekranowy
To podejście zakłada, że tekst ma znaną wysokość-w tym przypadku
18px
. Po prostu absolutnie umieść element50%
OD GÓRY, względem elementu nadrzędnego. Użyj wartości ujemnejmargin-top
, która jest połową wartości znana Wysokość 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;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
-
Podejście 5-metoda
line-height
(najmniej elastyczna - nie sugerowana):Przykład Tutaj
W niektórych przypadkach element nadrzędny będzie miał stałą wysokość. Aby wyśrodkować pionowo, wystarczy ustawić na elemencie potomnym wartość
line-height
równą stałej wysokości elementu nadrzędnego.Chociaż to rozwiązanie będzie działać w w niektórych przypadkach, warto zauważyć, że nie będzie działać, gdy istnieje wiele linijek tekstu - jak to.
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-04 09:53:06
Jeśli CSS3 jest opcją (lub masz alternatywną) możesz użyć transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
W przeciwieństwie do pierwszego podejścia powyżej, nie chcesz używać left: 50% z negatywnym tłumaczeniem, ponieważ jest błąd przepełnienia w IE9+. Użyj dodatniej wartości prawej, a nie zobaczysz poziomych pasków przewijania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-04 19:25:16
Najlepiej wyśrodkować pudełko w pionie i poziomie, używając dwóch pojemników:]}
##The outhere container:
- powinien mieć
display: table;
##pojemnik wewnętrzny:
- powinien mieć
display: table-cell;
- powinien mieć
vertical-align: middle;
- powinien mieć
text-align: center;
##the content box:
- powinien mieć
display: inline-block;
- należy dostosować poziome wyrównanie tekstu, chyba że chcesz, aby tekst był centered
##Demo:
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
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">
Center this!
</div>
</div>
</div>
Zobacz this Fiddle!
##Centrowanie w środku strony:
Aby wyśrodkować zawartość na środku strony, dodaj następujące elementy do zewnętrznego kontenera:
position : absolute;
width: 100%;
height: 100%;
Oto demo na to:
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
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">
Center this!
</div>
</div>
</div>
Zobacz this Fiddle!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-04 15:06:15
Oto jak użyć 2 prostych właściwości flex do wyśrodkowania N div na osi 2:
- Ustaw wysokość kontenera: tutaj ciało jest ustawione na co najmniej 100vh.
-
align-items: center
wyśrodkuje bloki w pionie -
justify-content: space-around
rozdzieli wolną przestrzeń poziomą wokół div
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-24 09:38:41
Uruchom ten fragment kodu i zobacz pionowo i poziomo wyrównany div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-03 18:35:29
Najprostszym i najczystszym rozwiązaniem dla mnie jest użycie właściwości CSS3 "transform":
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-03 21:52:42
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Pierwsze dziecko będzie wyrównane pionowo i poziomo na środku
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-21 14:19:05
Aby wyśrodkować Div na stronie sprawdź link fiddle
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Update Inną opcją jest użycie flex box sprawdź link fiddle
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-04 23:06:23
Poniżej znajduje się podejście Flex-box, aby uzyskać pożądany rezultat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-13 13:46:27
Innym podejściem jest użycie tabeli:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-03 21:52:46
Aby wyśrodkować element w pionie i poziomie możemy również użyć poniższych właściwości.
Ta właściwość CSS wyrównuje-Elementy w pionie i akceptuje następujące wartości:
Flex-start : elementy są wyrównane do górnej części kontenera.
Flex-end : elementy wyrównują się do dna kontenera.
Center : elementy wyrównują się w pionowym środku kontenera.
Baseline: elementy wyświetlane w punkcie bazowym pojemnika.
Stretch : przedmioty są rozciągnięte, aby pasowały do pojemnika.
Ta właściwość CSS justify-content , która wyrównuje elementy w poziomie i akceptuje następujące wartości:
Flex-start : elementy są wyrównane do lewej strony kontenera.
Flex-end: elementy są wyrównane do prawej strony kontenera.
Center : elementy wyrównują się na środku kontenera.
Spacja-pomiędzy : wyświetlanie elementów z równym odstępem między nimi.
Spacja wokół : elementy wyświetlają się z równymi odstępami wokół nich.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-21 08:53:38
Grid css approach
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-11 19:22:46
CSS Grid: place-items
Wreszcie mamy place-items: center
dla CSS Grid, aby to ułatwić.
HTML
<div class="parent">
<div class="to-center"></div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
Wyjście:
html,
body {
height: 100%;
}
.container {
display: grid;
place-items: center;
height: 100%;
}
.center {
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
padding: 10px;
}
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-09 14:53:58
Ustaw górny, dolny, lewy i Prawy do 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-21 06:16:19
Możesz to osiągnąć za pomocą CSS (twojego elementu display:inline-grid
+ grid-auto-flow: row;
) Grid i Flex Box (element nadrzędny display:flex;
),
Patrz poniżej fragment
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-05 14:38:02
Jeśli wolisz Bez:
flexbox / grid / table
or without the:
vertical-align: middle
Możesz zrobić:
HTML
<div class="box">
<h2 class="box_label">square</h2>
</div>
CSS
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}
.box_label {
box-sizing: border-box;
display: inline-block;
transform: translateY(50%);
text-align: center;
border: 1px solid black;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-15 09:02:27
Należy wykonać następujące Nowe i łatwe rozwiązanie:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-28 06:55:17
- podejście 6
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-02 12:52:14
Source Link
Metoda 1) Typ wyświetlacza flex
.child-element{ display: flex; justify-content: center; align-items: center; }
Metoda 2) transformacja 2D
.child-element { top: 50%; left: 50%; transform: translate(-50% , -50%); position: absolute; }
Zobacz inne metody TUTAJ
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-19 15:56:12
Najprostszym sposobem wyśrodkowania div zarówno w pionie, jak i w poziomie jest:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
Jeszcze Jeden Przykład :
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-20 13:56:58
Jest to związany z tym problem, że ludzie mogą przyjść na tę stronę podczas wyszukiwania: Kiedy chcę wyśrodkować div dla (kwadrat 100px) "czekając.."animowany gif, którego używam:
.centreDiv {
position: absolute;
top: calc(50vh - 50px);
top: -moz-calc(50vh - 50px);
top: -webkit-calc(50vh - 50px);
left: calc(50vw - 50px);
left: -moz-calc(50vw - 50px);
left: -webkit-calc(50vw - 50px);
z-index: 1000; /*whatever is required*/
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-06 00:40:55
To powinno działać
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-21 05:24:19
Najprostsze flexbox
podejście:
Najprostszym sposobem na wyśrodkowanie pojedynczego elementu w pionie i poziomie jest uczynienie z niego elementu flex i ustawienie jego marginesu na auto
:
Jeśli zastosujesz automatyczne marginesy do elementu flex, ten element będzie automatycznie Rozszerz swój określony margines, aby zająć dodatkową przestrzeń w flexie Pojemnik...
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>
To rozszerzenie marginesów w każdym kierunku spowoduje wypchnięcie elementu dokładnie na środku pojemnika.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-10 11:31:06