CSS: middelste element binnen een <div> element

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}
.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;
}

<div class="parent">
   <span class="child">hi</span>
</div>  

Antwoord 6, autoriteit 2%

U kunt de naam van de bootstrap flexklasse als volgt gebruiken:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

Dat werkt zelfs met het aantal elementen erin.

Antwoord 7

Is de div een vaste breedte of een vloeiende breedte? Hoe dan ook, voor vloeiende breedte zou je kunnen gebruiken:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

Of u kunt de bovenliggende div instellen op text-align:center;en de onderliggende div op text-align:left;.

En left:50%;centreert het alleen volgens de hele pagina wanneer de div is ingesteld op position:absolute;. Als je de div instelt op left:50%;zou het dit moeten doen in verhouding tot de breedte van de bovenliggende div. Doe dit voor een vaste breedte:

#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}

Antwoord 8

geef de bovenliggende div position: relative

Antwoord 9

Als u CSS3 wilt gebruiken:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

Misschien wilt u verder zoeken om erachter te komen hoe u het percentage kunt aanpassen aan de breedte van uw element.

Antwoord 10

Ik geloof dat de moderne manier om te gaan place-items: centerin de bovenliggende container is

Een voorbeeld is hier te vinden: https://1linelayouts.glitch.me

Antwoord 11

Allereerst kun je het doen met left:50% om het te centreren ten opzichte van de bovenliggende div, maar daarvoor moet je CSS-positionering leren.

Een van de vele mogelijke oplossingen is om iets te doen als

   div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

Als uw div die gecentreerd moet worden relatief is gepositioneerd, kunt u dat gewoon doen

   .mydiv { position:relative; margin:0 auto; } 

Antwoord 12

links: 50% werkt resectief naar de dichtstbijzijnde ouder met toegewezen statische breedte. Probeer breedte: 500px of iets op bovenliggende div. U kunt ook de inhoud die u nodig heeft centreren op het scherm:blokkeren en linker- en rechtermarges instellen op automatisch.

Antwoord 13

Als het onderliggende element inline is (bijvoorbeeld geen div, tableenz.), zou ik het in een divof een pen zorg ervoor dat de tekst van de wrapper de css-eigenschap gelijk uitlijnt met het midden.

   <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

Anders, als het element een blok is (display: block, bijv. een divof een p) met een vaste breedte, zou de linker en rechter css-eigenschappen van de marge op auto zetten.

   <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

Je kunt natuurlijk een text-align: centertoevoegen aan het wrapper-element om de inhoud ook gecentreerd te maken.

Ik zal me niet druk maken over de positionering, want IMHO is niet de manier om het OPs-probleem op te lossen, maar kijk zeker eens op deze linkuit, erg handig.

Antwoord 14

Maak een nieuw div-element om uw element te centreren en voeg vervolgens een klasse toe die specifiek is om dat element op deze manier te centreren

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

CSS

.centered{
    text-align:center;
}

Antwoord 15

Ik heb een andere oplossing gevonden

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

en in lichaam

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

Hiermee wordt uw inhoudsdiv gecentreerd wanneer uw container groter of kleiner is. In dit geval moet je inhoud groter zijn dan 1100% van de container om niet gecentreerd te zijn, maar in dat geval kun je met containerSecond groter maken, en het zal werken

Antwoord 16

Wijs text-align: center;toe aan de parent en display: inline-block;aan de div.

Antwoord 17

Ik heb bijvoorbeeld een artikel-div die zich in een hoofdinhouds-div bevindt.
In het artikel staat een afbeelding en onder die afbeelding is een knop, stijl als deze:

.artikel {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

}
.artikel {

}

/* in het artikel wil ik de afbeelding gecentreerd hebben */

.artikel img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/* Nu zou er onder deze afbeelding in hetzelfde artikelelement een knop moeten staan zoals lees meer Natuurlijk moet je met em of % werken als het in een responsief ontwerp zit*/

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

Veel succes

Antwoord 18

Als je elementen in een div wilt centreren en je niet om de grootte van een divisie geeft, kun je Flex Power gebruiken. Ik gebruik liever flex en gebruik geen exacte maat voor elementen.

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

Zoals je kunt zien is Outer div een Flex-container en Inner moet een Flex-item zijn dat gespecificeerd is met flex: 1 1 auto;voor een beter begrip kun je dit eenvoudige voorbeeld bekijken. http://jsfiddle.net/QMaster/hC223/

Ik hoop dat dit helpt.

Antwoord 19

de mijne wil graag magie.

html, body {
 height: 100%;
}
.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
<div class="flex-container">
  <div>Content</div>
</div>

Antwoord 20

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">
     </div>
     </div> 
  </body>
</html>