it-swarm-eu.dev

Jak vodorovně centrovat <div>?

Jak mohu vodorovně centrovat <div> v rámci jiného <div> pomocí CSS? 

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3840
Lukas

Tento CSS můžete použít na vnitřní <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Nemusíte samozřejmě nastavit width na 50%. Bude fungovat jakákoliv šířka menší než obsahuje <div>. margin: 0 auto je to, co dělá skutečné centrování.

Pokud cílíte na IE8 +, mohlo by být lepší mít toto místo:

#inner {
  display: table;
  margin: 0 auto;
}

Vnitřní prvek se umístí vodorovně a funguje bez nastavení specifického width.

Pracovní příklad zde:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

4316
Justin Poliey

Pokud nechcete nastavit pevnou šířku na vnitřní proměnné div, můžete něco takového udělat:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Díky tomu je vnitřní div do vloženého elementu, který může být vystředěn text-align.

1160
Alfred

Nejlepší přístupy jsou s CSS 3 .

Box model:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Podle vaší použitelnosti můžete také použít vlastnosti box-orient, box-flex, box-direction.

Flex:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Přečtěte si více o centrování dětských elementů

A vysvětluje, proč je model boxu nejlepším přístupem:

329
Konga Raju

Předpokládejme, že vaše div je 200px široký:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Ujistěte se, že rodičovský prvek je umístěn tj. Relativní, pevný, absolutní nebo lepkavý.

Pokud neznáte šířku vašeho div, můžete místo záporného okraje použít transform:translateX(-50%);.

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

Vytvořil jsem tento příklad pro zobrazení toho, jak vertikálně a horizontálněalign.

Kód je v podstatě toto:

#outer {
  position: relative;
}

a...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

a zůstane v center, i když re-size obrazovce.

210
Tom Maton

Některé plakáty zmiňují cestu CSS 3 do centra pomocí display:box.

Tato syntaxe je zastaralá a již by se neměla používat. [Viz také tento příspěvek] .

Takže právě pro úplnost je zde poslední způsob, jak se centrovat v CSS 3 pomocí modulu Flexible Box Layout Module.

Pokud tedy máte jednoduché značení:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... a chcete vycentrovat své položky do pole, zde je to, co potřebujete na nadřazeném prvku (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Pokud potřebujete podporovat starší prohlížeče, které používají starší syntaxi pro flexbox zde dobré místo k pohledu.

175
Danield

Pokud nechcete nastavit pevnou šířku a nechcete, aby byl přidán další okraj, přidejte display: inline-block do svého prvku.

Můžeš použít:

#element {
    display: table;
    margin: 0 auto;
}
127
Salman Abbas

Vlastnost zarovnání boxu CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
80
neoneye

Nemůže být vycentrován, pokud mu nedáte šířku, jinak to bude trvat, ve výchozím nastavení celý horizontální prostor.

79
gizmo

Nastavte width a nastavte margin-left a margin-right na auto. To je pouze pro horizontální. Pokud chcete oba způsoby, udělali byste to oběma způsoby. Nebojte se experimentovat; není to tak, že bys něco zlomil.

78
Sneakyness

Vycentrování div neznámé výšky a šířky

Horizontálně i vertikálně. Pracuje s poměrně moderními prohlížeči (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera atd.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker s ním dále na Codepen nebo na JSBin .

77
iamnotsam

Nedávno jsem musel vycentrovat „skrytý“ div (tj. Zobrazit: žádný;), který měl v sobě vytvořený formulář, který musel být vycentrován na stránce. Napsal jsem následující jQuery, abych zobrazil skrytý div a pak aktualizoval CSS na automaticky generovanou šířku tabulky a změnil okraj, aby se vycentroval. (Přepínání zobrazení se spustí kliknutím na odkaz, ale tento kód nebyl nutný k zobrazení.)

POZNÁMKA: Tento kód sdílím, protože Google mě přivedl k tomuto řešení přetečení zásobníku a vše by fungovalo, s výjimkou toho, že skryté prvky nemají žádnou šířku a nelze měnit velikost/na střed, dokud se nezobrazí.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

55
James Moberg

Způsob, jakým to obvykle dělám, je pomocí absolutní pozice:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Vnější div nepotřebuje žádné další vlastnosti, aby to fungovalo.

49
william44isme

Pro prohlížeče Firefox a Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Pro aplikace Internet Explorer, Firefox a Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Vlastnost text-align: je volitelná pro moderní prohlížeče, ale v režimu Internet Explorer Quirks je nutná podpora starších prohlížečů.

48
ch2o

To je moje odpověď.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

43
Ankit Jain

Další řešení, aniž by bylo nutné nastavit šířku pro jeden z prvků, je pomocí atributu CSS 3 transform.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Trik je v tom, že translateX(-50%) nastavuje prvek #inner 50% nalevo od své vlastní šířky. Můžete použít stejný trik pro vertikální zarovnání.

Zde je Fiddle zobrazující vodorovné a svislé zarovnání.

Další informace naleznete na stránkách Mozilla Developer Network .

39
Kilian Stinson

Chris Coyier, který napsal vynikající post na 'Centrování v neznámém' na svém blogu. Je to několikanásobné řešení. Poslal jsem jeden, který není v této otázce zveřejněn. Má více prohlížeče podporu pak flexbox-řešení, a vy nepoužíváte display: table;, které by mohly zlomit jiné věci. 

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
38
Willem de Wit

Uvědomuji si, že jsem do hry dost pozdě, ale tohle je velmi populární otázka a nedávno jsem našel přístup, který jsem zde nikde neviděl, takže jsem si myslel, že bych to dokumentoval.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT: oba prvky musí mít stejnou funkci, aby fungovaly správně.

33
BenjaminRH

Viz například tento odkaz a úryvek níže:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Pokud máte mnoho dětí pod rodičem, musí být obsah CSS takhle příklad na fiddle .

Vzhled obsahu HTML se líbí:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Pak se podívejte na toto příklad na fiddle .

28
Lalit Kumar

Nejjednodušší způsob:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

25
joan16v

Centrování pouze vodorovně

Podle mých zkušeností je nejlepším způsobem, jak umístit rámeček vodorovně, použít následující vlastnosti:

Kontejner:

  • by měl mít text-align: center;

Obsahové pole:

  • by měl mít display: inline-block;

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Viz také this Fiddle !


Vycentrování horizontálně i vertikálně

Podle mých zkušeností je nejlepším způsobem, jak umístit rámeček oba svisle i vodorovně, použít další kontejner a použít následující vlastnosti:

Vnější nádoba:

  • by měl mít display: table;

Vnitřní kontejner:

  • by měl mít display: table-cell;
  • by měl mít vertical-align: middle;
  • by měl mít text-align: center;

Obsahové pole:

  • by měl mít display: inline-block;

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  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>

Viz také this Fiddle !

25
John Slegers

Zde je to, co chcete nejkratší cestou. 

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
22
caniz

Můžete něco takového udělat

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Toto také zarovná #inner svisle. Pokud nechcete, odstraňte vlastnosti display a vertical-align;

22
Kenneth Palaganas

Pokud je šířka obsahu neznámá, můžete použít následující metodu . Předpokládejme, že máme tyto dva prvky:

  • .outer - plná šířka
  • .inner - není nastavena žádná šířka (ale lze zadat max. šířku)

Předpokládejme, že vypočtená šířka prvků je 1000px a 300px. Postupujte následovně:

  1. Wrap .inner uvnitř .center-helper
  2. Vytvořit .center-helper inline blok; to se stane stejnou velikostí jako .inner dělat to 300px široký.
  3. Push .center-helper 50% vpravo vzhledem k rodiči; toto umístí jeho levý u 500px wrt. vnější.
  4. Push .inner 50% zbývá vzhledem k rodiči; toto umístí jeho levý u -150px wrt. středový pomocník, což znamená, že jeho levice je 500 - 150 = 350px wrt. vnější.
  5. Nastavit přetečení .outer na skryté, aby se zabránilo vodorovnému posuvníku.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
21
Salman A

Zarovnání textu: střed

Použití text-align: center _ obsahu vloženého textu je vycentrováno uvnitř řádkového pole. Jelikož však vnitřní div má ve výchozím nastavení width: 100%, musíte nastavit určitou šířku nebo použít jednu z následujících možností:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Okraj: 0 auto

Použití margin: 0 auto je další možnost a je vhodnější pro starší prohlížeče. Pracuje společně s display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Flexbox

display: flex se chová jako prvek bloku a vypisuje jeho obsah podle modelu flexboxu. Pracuje s justify-content: center .

Poznámka: Flexbox je kompatibilní s většinou prohlížečů, ale ne všechny. Úplný a aktuální seznam kompatibility prohlížečů naleznete v tématu zde .

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Přeměnit

transform: translate umožňuje upravit souřadný prostor modelu vizuálního formátování CSS. Pomocí ní lze prvky přeložit, otočit, zmenšit a zkosit. Chcete-li vycentrovat vodorovně, vyžaduje position: absolute a left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


<center> (zastaralé)

Značka <center> je alternativou HTML k text-align: center . Pracuje na starších prohlížečích a většině nových, ale není považován za dobrou praxi, protože tato funkce je zastaralý a byla odstraněna z webových standardů.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

21
Paolo Forgia

No, podařilo se mi najít řešení, které bude vhodné pro všechny situace, ale používá JavaScript:

Zde je struktura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

A zde je fragment kódu JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Pokud jej chcete použít v citlivém přístupu, můžete přidat následující položky:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
19
Miguel Leite

Můžete použít display: flex pro váš vnější div a do vodorovného středu musíte přidat justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

nebo můžete navštívit w3schools - CSS flex Property pro více nápadů.

19
Milan Panigrahi

Jedna možnost existovala:

Každý říká:

margin: auto 0;

Ale je tu další možnost. Nastavte tuto vlastnost pro nadřazený div. Funguje perfektně kdykoliv:

text-align: center;

A vidíte, dítě jít do centra.

A nakonec CSS pro vás:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}
18
Pnsadeghy

Flex má více než 97% pokrytí podpory prohlížeče a může být nejlepším způsobem řešení těchto problémů v několika řádcích:

#outer {
  display: flex;
  justify-content: center;
}
18

Tato metoda funguje také dobře:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Pro vnitřní <div>, jedinou podmínkou je, že jeho height a width nesmí být větší než ta jeho kontejneru.

18
Billal Begueradj

Zkuste si hrát s 

margin: 0 auto;

Pokud chcete text také vycentrovat, zkuste použít následující postup:

text-align: center;
17
user1817972

Pokud by někdo chtěl řešení jQuery pro centrum zarovnat tyto divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

můžete jednoduše použít flexbox takto:

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Použít nástroj Autoprefixer pro veškerou podporu prohlížeče:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

NEBO JINAK

použití transformace :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

s funkcí Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
7
Shashin Bhayani

CSS 3:

Následující styl můžete použít v nadřazeném kontejneru k rovnoměrnému distribuci podřízených prvků:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

A Nice DEMO týkající se různých hodnot justify-content.

 Enter image description here

CanIUse: Kompatibilita prohlížeče

Zkus to!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

Použil jsem inline styl na vnitřní div. Použijte tento. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7
aamirha
#inner {
    width: 50%;
    margin: 0 auto;
}
6
anand jothi

Toho můžete dosáhnout pomocí CSS Flexbox. Stačí, když použijete 3 vlastnosti na rodičovský prvek, abyste dostali vše funkční.

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

Podívejte se na níže uvedený kód, který vám umožní lépe porozumět vlastnostem.

Více informací o CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

6
Saurav Rastogi

Pěkná věc, kterou jsem nedávno našel, míchání použití line-height + vertical-align a 50% vlevo trik, můžete center dynamicky velké pole uvnitř jiného dynamicky velkého boxu, na horizontální i vertikální pomocí čistého CSS. 

Poznámka: musíte použít rozpětí (a inline-block) testované v moderních prohlížečích + IE8. HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Viz příklad zde

6
Josh Mc

Jak se o níže uvedených CSS pro #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Většinou používám tento CSS do centra divs.

5
Rajesh

Střed a div v div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

Zjednodušit to!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3
Hassan Siddiqui

Používám jen nejjednodušší řešení, ale funguje ve všech prohlížečích:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

Použití:

<div id="parent">
  <div class="child"></div>
</div>

Styl:

#parent {
   display: flex;
   justify-content: center;
}

Pokud jej chcete vycentrovat vodorovně, měli byste napsat níže:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

Je možné použít CSS 3 flexbox . Při použití flex boxu máte dvě metody.

  1. Nastavte rodičovský display:flex; a přidejte vlastnosti {justify-content:center; ,align-items:center;} do nadřazeného prvku.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Nastavte nadřazené display:flex a přidejte margin:auto; pro dítě.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

3
Dream Hunter

Může být také vycentrován vodorovně a svisle pomocí absolutního polohování, jako je toto:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo

Můžete použít flexbox.

#inner {
   display: flex;
   justify-content: center;
}

Více se o tom můžete dozvědět na tomto odkazu: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3
Cyan Baltazar

Chtěl jsem na to odpovědět tak, jak jsem si všiml, že nikdo nezmínil metodu calc. Použití je pro div, na který se zaměřujete, pokud znáte jeho šířku, řekněme, že je to 1200 pixelů, přejděte na:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Takže v podstatě přidá levý okraj 50% mínus polovina známé šířky.

2
serdarsenay

Nejznámější způsob, který je široce používán a pracuje ve mnoha prohlížečích včetně starých, používá margin jako níže:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Spusťte kód, abyste zjistili, jak to funguje, také jsou zde 2 důležité věci, na které jste nezapomněli ve vašem CSS, když se snažíte tímto způsobem vycentrovat: margin: 0 auto;, které z něj dělají centrum div, jak chtěl, a nezapomeňte na width dítěte , jinak se nedostane na střed podle očekávání! 

2
Alireza
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
2
pavelbere

Od roku 2019, protože tato otázka stále dostává mnoho zásahů velmi jednoduchá a křížová odpověď na horizontální centrum je použít toto pravidlo na rodičovský prvek:

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

Zde je další způsob, jak vycentrovat vodorovně pomocí flexbox a bez určení jakékoliv šířky do vnitřního kontejneru. Cílem je použít pseudo elementy, které posunou vnitřní obsah zprava a doleva.

Použitím flex:1 na pseudo elementu budou vyplněny zbývající prostory a budou mít stejnou velikost a vnitřní kontejner bude vycentrován.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Můžeme také zvážit stejnou situaci pro vertikální vyrovnání jednoduše změnou směru ohnutí na sloupec:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

Toto soustředí váš vnitřní div horizontálně a vertikálně:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Pouze pro vodorovné zarovnání změňte

margin: 0 auto;

a pro vertikální změnu

margin: auto 0;
1
Shivam Chhetri

CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
1
Abdul Ghaffar

Po přečtení všech odpovědí jsem neviděl ten, který dávám přednost. To je, jak můžete prvek vycentrovat v jiném. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

Tento kód můžete přidat:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

V závislosti na vašich okolnostech by nejjednodušším řešením mohlo být:

margin:0 auto; float:none;
1
Justin Munce

Nejjednodušší odpověď přidat okraj: auto; na vnitřní.

<div class="outer">
  <div class="inner">
    Foo foo
  </div>
</div>

css kód

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

zkontrolovat odkaz na odkaz http://codepen.io/feizel/pen/QdJJrK

 enter image description here

1
Faizal Munna

Dejte width vnitřní div a přidejte margin:0 auto; do vlastnosti CSS.

1
Mr.Pandya

Použití:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

Ano, je to krátký a čistý kód pro vodorovné zarovnání. Doufám, že se vám tento kód líbí.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

Použijte níže uvedený kód.

HTML

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

Použijte tento kód:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

Můžete si to koupit pomocí flex-box čarodějnice je dobrá technika v těchto dnech. Pro použití flex-box byste měli dát display: flex; a align-items: center; do svého rodiče nebo #outer div prvek. Kód by měl vypadat takto:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

To by mělo vycentrovat vaše dítě nebo #inner div vodorovně. Ale nemůžete vidět žádné změny. Protože naše #outer div nemá žádnou výšku nebo jinými slovy, jeho výška je nastavena na hodnotu auto, takže má stejnou výšku jako všechny její podřízené elementy. Takže po malém vizuálním stylu by výsledný kód měl být takto:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Nyní můžete vidět #inner div, který je nyní vycentrován. Flex-box je nová metoda umístění prvků v horizontálních nebo vertikálních zásobnících s CSS a má 96% kompatibility globálních prohlížečů. Takže můžete volně používat a pokud se chcete dozvědět více o návštěvě Flex-boxu CSS-Tricks article, to je podle mého názoru nejlepší místo, kde se můžete učit pomocí Flex-boxu.

1
Morteza Sadri

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

Je to tak jednoduché.

Stačí rozhodnout, jakou šířku chcete dát vnitřní div a použít následující CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

Toto jistě vycentruje vaši #inner horizontálně i vertikálně. To je také kompatibilní ve všech prohlížečích. Jen jsem přidal další styling, abych ukázal, jak je vycentrován.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ale samozřejmě, pokud chcete, aby to bylo jen vodorovně, to vám může pomoci.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Mark Salvania

Můžete použít jeden řádek kódu, pouze text-align:center.

Zde je příklad:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

Jeden z nejjednodušších způsobů, jak to udělat, je pomocí display: flex. Vnější div prostě musí mít displej flex, a vnitřní potřeby margin: 0 auto, aby se ve středu horizontálně.

Pro orientaci svisle a jen střed div v rámci jiného div, podívejte se prosím na komentáře níže uvedené třídy .inner

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

Je mi líto, ale tohle dítě od 90. let pro mě bylo PRACOVNÍ:

<div id="outer">  
  <center>Foo foo</center>
</div>

Jdu do pekla za tento hřích?

1
Heitor

Nejlepší, co jsem použil ve svých různých projektech je 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

fiddle link

1
Jaison

Mohli bychom použít další třídu CSS, která dovoluje střed svisle a vodorovně libovolný prvek proti svému rodiči:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

Nejlepším způsobem je použití zobrazení tabulky (vnitřní), které přichází přesně za div se zobrazovací tabulkou (vnější) a nastavte vertikální zarovnání pro vnitřní div (s tabulkovým displejem) a každou značku používanou ve vnitřní div umístěné ve středu div nebo stránky.

Poznámka: musíte nastavit zadanou výšku na vnější

Je to nejlepší způsob, jak znáte bez pozice relativní nebo absolutní, a můžete jej použít v každém prohlížeči stejně.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

Místo více obálek a/nebo automatických okrajů toto jednoduché řešení funguje pro mě:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Umístí div do středu pohledu (vertikální a horizontální), velikosti a upraví velikost, vycentruje obrázek na pozadí (vertikální a horizontální), vycentruje text (horizontální) a zachová div v pohledu a v horní části obsahu. Jednoduše umístěte do HTML body a užívejte si.

0
Cees Timmerman

Vyzkoušejte toto:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

to fungovalo pro mě:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

V tomto kódu musíte určit šířku prvku.

Našel jsem podobné s margin-left, ale může být také left.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

Přidejte CSS do vašeho vnitřního div. Nastavte margin: 0 auto a nastavte jeho šířku menší než 100%, což je šířka vnějšího div.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

To poskytne požadovaný výsledek.

0
Joseph

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

0
Anu

Vím, že jsem trochu pozdě na zodpovězení této otázky, a já jsem se neobtěžoval číst každou odpověď, takže to může být duplikát. Zde je můj názor :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

Prostě Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

0
Sankar

Přidat text-align:center; do rodičovského div 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

nebo 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Hlavní atributy pro centrování div jsou margin: auto a width: podle požadavků:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

pro normální věc, pokud používáte div statický způsob

pokud chcete, aby div byl ve středu, když div je absolutní k jeho rodiči zde je příklad:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
0

Můžete to udělat jiným způsobem. Podívejte se na níže uvedené příklady:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0
Gaurang Sondagar

Zkuste to:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

Za prvé: Musíte zadat šířce druhé div:

Například:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Všimněte si, že pokud jí nedáte šířku, bude to trvat celou šířku řádku.

0
user3968801