Jak wyśrodkować element w pionie i poziomie?
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>
13 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;
Wewnętrzny pojemnik:
- powinien mieć
display: table-cell;
- powinien mieć
vertical-align: middle;
- powinien mieć
text-align: center;
Pole zawartości:
- 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 swojego 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 to 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
2016-03-15 12:52:41
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
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
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
.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
- 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
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
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
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
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
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