Hoe kan ik een div centreren in een andere div?

#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185C5;
  position: relative;
}
#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

<div id="main_content">
  <div id="container">
  </div>
</div>

Antwoord 1, autoriteit 100%

U moet de widthvan de container instellen (autowerkt niet):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

De CSS-referentie van MDNlegt het allemaal uit.

Bekijk deze links:

• auto – CSS-referentie | MDN
• marge – CSS-referentie | MDN
• Wat is de betekenis van autowaarde in een CSS eigendom – Stack Overflow

in actie bij JSFiddle .

Antwoord 2, Autoriteit 35%

Technisch gezien, uw innerlijke div (#container) is horizontaal gecentreerd. De reden dat je niet kunt zien is omdat het met de CSS width: autoProperty De Inner Div uitbreidt naar dezelfde breedte als zijn ouder.

Zie deze Fiddle: http://jsfiddle.net/uz4ae/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

In dit voorbeeld instel ik eenvoudig de breedte van #containernaar 50pxen stel de achtergrond in op redzodat u dat kunt zien het is gecentreerd.

Ik denk dat de echte vraag is “hoe kun ik elementen horizontaal met CSS centreren?” En het antwoord is (drumrol alsjeblieft): Het hangt ervan af!

Ik zal geen volledige rehash van de ontelbare manieren doen om dingen met CSS te centreren wanneer W3schools het zo mooi hier doet: http://www.w3schools.com/css/css_Align.asp maar het basisidee is dat voor blokniveau-elementen u eenvoudig de gewenste breedte opgeven en de linker- en rechtermarges instellen op auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

Let op: Dit antwoord is alleen van toepassing op BLOK Niveau-elementen! Om een ​​inline -element te positioneren, moet u de text-align: centerProperty op het eerste -blok ouder gebruiken.

Antwoord 3, Autoriteit 25%

Een andere interessante manier: viool

CSS

   .container {
        background: yellow;
        width: %100;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .centered-div {
        width: 80%;
        height: 190px;
        margin: 10px;
        padding: 5px;
        background: blue;
        color: white;
    }

HTML

   <div class="container">
        <div class="centered-div">
            <b>Enjoy</b>
        </div>
    </div>

Antwoord 4, autoriteit 11%

Je kunt float div centreren met deze kleine code:

#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

Antwoord 5, autoriteit 8%

Definieer nu gewoon uw

#main_contenttext-align:centeren definieer uw#containerdisplay:inline-block;

als volgt:

#main_content {
    text-align: center;
}
#container{
    display: inline-block;
    vertical-align: top;
}

Antwoord 6, autoriteit 7%

Probeer toe te voegen

text-align: center;

naar uw CSS-declaratie voor de bovenliggende container. En het volgende voor de onderliggende container:

display: inline-block;

het moet de truc doen.

Antwoord 7, Autoriteit 3%

Gebruik margin:0 auto;aan het kind DIV. Dan kun je het kind div in de ouder div.

Antwoord 8, Autoriteit 3%

Het zou werken met het geven van de #container div width:80%(elke breedte minder dan de hoofdinhoud en heeft in% gegeven, zodat het goed van zowel links als rechts beheert) en margin:0px auto;of margin:0 auto;(Beide Beide Fijn).

Antwoord 9, Autoriteit 3%

Ik zou proberen een specifiekere breedte te definiëren, voor starters. Het is moeilijk om iets te centreren dat al de volledige breedte overspant:

#container {
    width: 400px;
}

Antwoord 10, Autoriteit 3%

Ik heb de volgende methode in een paar projecten gebruikt:

https://jsfiddle.net/u3ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}
.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Antwoord 11, Autoriteit 2%

Hier is een nieuwe manier om eenvoudig uw div te centreren met behulp van FLEXBOX-display.

Zie deze werkende viool: https://jsfiddle.net/5u0y5QL2/

Hier is de CSS:

.layout-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.layout-align-center-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

Antwoord 12, Autoriteit 2%

Probeer de position:relative;in uw #container. Voeg een exacte breedte toe aan #container:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}
#container {
    width: 600px;
    height: auto;
    margin: auto;
    padding: 10px;
}

werkende demo

Antwoord 13, Autoriteit 2%

Hier is de oplossing:

#main_content {
    background-color: #2185C5;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    position: relative;
    width: 800px;
}

Antwoord 14, Autoriteit 2%

#main_content {
    width: 400px;
    margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}
#container {
    width: 50%;
    height: auto;
    margin: 0 auto;
    background-color: #CCC;
    padding: 10px;
    position: relative;
}

Probeer dit. Het testte OK. Er is een live-cheque op JSFiddle .

Antwoord 15, Autoriteit 2%

Misschien wil je als volgt: Demo

HTML

<div id="main_content">
    <div id="container">vertical aligned text<br />some more text here
    </div>
</div>

CSS

#main_content {
    width: 500px;
    height: 500px;
    background: #2185C5;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#container{
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    padding: 10px;
}

Hoe?

In een tabelcel wordt verticaal uitlijnen met midden ingesteld op verticaal gecentreerd op het element en text-align: center;werkt als horizontale uitlijning op het element.

Gemerkt waarom #container in inline-block staat omdat dit in de staat van de rij staat.

Antwoord 16, autoriteit 2%

Iedereen zei het, maar ik denk dat het geen kwaad kan om het nog een keer te zeggen.

Je moet de widthop een bepaalde waarde instellen. Hier is iets eenvoudiger te begrijpen.

http://jsfiddle.net/XUxEC/

Antwoord 17, autoriteit 2%

Om een div in het midden te maken. Het is niet nodig om de breedte van de div toe te wijzen.

Hier is een werkende demo:

http://jsfiddle.net/6yukdmwq/

   .container {
        width: 100%;
        height: 500px;
        display: table;
        border: 1px solid red;
        text-align: center;}
    .center {
        display: table-cell;
        vertical-align: middle;
    }
    .content {
        display: inline-block;
        text-align: center;
        border: 1px solid green;
    }

   <section class="container">
        <div class="center">
            <div class="content">
                <h1>Helllo Center Text</h1>
            </div>
        </div>
    </section>

Antwoord 18

Het is omdat uw breedte is ingesteld op automatisch. Je moet de breedte opgeven om zichtbaar gecentreerd te zijn.

Je #container beslaat de hele breedte van de #main_content. Daarom lijkt het niet gecentreerd.

Antwoord 19

Als je width: autoinstelt op een blokelement, dan zou de breedte 100% zijn. Het heeft dus niet zoveel zin om hier de waarde autote hebben. Het is eigenlijk hetzelfde voor hoogte, omdat elk element standaard is ingesteld op een automatische hoogte.

Dus uiteindelijk is je div#containereigenlijk gecentreerd, maar het neemt gewoon de hele breedte van het bovenliggende element in beslag. U centreert rechts en u hoeft alleen de breedte (indien nodig) te wijzigen om te zien dat deze echt gecentreerd is. Als je je #main_content wilt centreren, pas er dan gewoon margin: 0 auto;op toe.

Antwoord 20

Zonder de widthin te stellen, krijgt het de maximale breedte die het kan krijgen. Je kunt dus niet zien dat de divgecentreerd is.

#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}

Antwoord 21

Maak de CSS-inhoud op deze manier…

#main_content {
    top: 160px;
    left: 160px;
    width: auto;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
 }
#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 10px;
}

Een werkend voorbeeld is hier: http://jsfiddle.net/golchha21/mjT7t/

Antwoord 22

Als u geen breedte wilt instellen voor #container, voegt u gewoon

toe

text-align: center;

naar #main_content.

Antwoord 23

Probeer deze als dit de output is die je wilt:

<div id="main_content" >
    <div id="container">
    </div>
</div>

#main_content {
    background-color: #2185C5;
    margin: 0 auto;
}
#container {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: red;
}

Antwoord 24

Dit zal volgens mij prima werken, hoewel je misschien “top:200px;” moet resetten. volgens uw behoeften:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
    border: 2px solid #CCCCCC;
}
#container {
    width: 100px;
    height: 20px;;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    top: 200px;
    border: 2px solid #CCCCCC;
}

Antwoord 25

U moet een breedte toewijzen aan de DIV die u wilt centreren.

Zoals dit:

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

Meer informatie en voorbeelden op deze links:

• CSS-lay-out – Horizontal & AMP; Verticaal uitlijnt

• http://www.w3schools.com /CSSS/tryit.asp?filename=tryCSS_Align_Container

Antwoord 26

.parent {
    width: 500px;
    height: 200px;
    border: 2px solid #000;
    display: table-cell;
    vertical-align: middle;
}
#kid {
    width:70%; /* 70% of the parent */
    margin:auto;
    border:2px solid #F00;
    height: 70%;
}

Hiermee wordt het probleem zeer goed opgelost (getest in alle nieuwe browsers), waar de ouder div heeft klasse = “Ouder” en het kind DIV heeft ID = “Kid”.

Die stijlcentra zowel horizontaal als verticaal. Verticaal centrum kan alleen worden gedaan met behulp van gecompliceerde trucs – of door de ouder DIV-functie als een tabelcel te maken, die een van de enige elementen in HTML is die de verticale uitlijning op de juiste manier ondersteunt.

Steek eenvoudig de hoogte van het kind, de marge auto- en middenverticale uitlijning en het zal werken. Het is de gemakkelijkste oplossing die ik ken.

Antwoord 27

* {
  box-sizing: border-box;
}
#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185c5;
  position: relative;
}
#container {
  width: 50%;
  height: 50%;
  margin: auto;
  padding: 10px;
  position: absolute;
  border: 5px solid yellow;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}