144 views

Een div verticaal centreren binnen een andere div

Hosted by Code Expert
.net

Ik wil een div centreren die is toegevoegd in een andere div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

Dit is de CSS die ik momenteel gebruik.

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }
    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Zoals je kunt zien, hangt de benadering die ik nu gebruik af van de waarden voor de breedte en hoogte van innerDiv. Als de breedte/hoogte verandert, moet ik de waarden voor margin-topen margin-leftaanpassen. Is er een generieke oplossing die ik kan gebruiken om de innerDivte centreren, onafhankelijk van de grootte?

Ik kwam erachter dat het gebruik van margin:autode innerDiv horizontaal naar het midden kan uitlijnen. Maar hoe zit het met verticaal uitlijnen in het midden?

Antwoord 1, autoriteit 100%

tl;dr

Verticale uitlijning van het midden werkt, maar u moet table-cellgebruiken voor uw bovenliggende element en inline-blockvoor het onderliggende element.

Deze oplossing gaat niet werken in IE6 & 7.
De jouwe is daarvoor de veiligere manier.
Maar aangezien je je vraag hebt getagd met CSS3 en HTML5, dacht ik dat je het niet erg zou vinden om een ​​moderne oplossing te gebruiken.

De klassieke oplossing (tafelindeling)

Dit was mijn oorspronkelijke antwoord. Het werkt nog steeds prima en is de oplossing met de breedste ondersteuning. Tabellay-out zal van invloed zijn op uw weergaveprestaties, dus ik raad u aan een van de modernere oplossingen te gebruiken.

Hier is een voorbeeld

Getest in:

  • FF3.5+
  • FF4+
  • Safari 5+
  • Chrome 11+
  • IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}
.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Moderne oplossing (transform)

Aangezien transformaties redelijk goed ondersteund worden, is er een eenvoudigere manier om dit te doen.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}
.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

mijn favoriete moderne oplossing (flexbox)

Ik begon flexbox steeds vaker te gebruiken het wordt nu ook goed ondersteundHet is verreweg de gemakkelijkste manier .

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

Meer voorbeelden & mogelijkheden:
Vergelijk alle methoden op één pagina

Antwoord 2, autoriteit 14%

Een andere manier om deze horizontale en verticale centrering te bereiken is:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(Referentie)

Antwoord 3, autoriteit 6%

Een andere manier is het gebruik van Transform Translate

Outer Div moet zijn positioninstellen op relativeof fixed, en de Inner Div moet zijn positioninstellen naar absolute, topen leftnaar 50%en pas een transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}
div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Antwoord 4, autoriteit 5%

Alles verticaal uitlijnen met slechts 3 regels CSS

HTML

<div class="parent-of-element">
    <div class="element">
        <p>Hello</p>
    </div>
</div>

Eenvoudigste

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}
.element {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Volgens shouldiprefixzijn dit de enige prefixen die u nodig hebt

Je kunt ook % gebruiken als de waarde voor de ‘height’-eigenschap van .parent-of-element, zolang de parent van het element hoogte heeft of inhoud die de verticale grootte vergroot.

Antwoord 5, autoriteit 2%

In plaats van mezelf in een knoop te leggen met moeilijk te schrijven en moeilijk te onderhouden CSS (waarvoor ook zorgvuldige cross-browser validatie nodig is!) vind ik het veel beter om CSS op te geven en in plaats daarvan wonderbaarlijk eenvoudige HTML te gebruiken 1.0:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Dit bereikt alles wat de originele poster wilde, en is robuust en onderhoudbaar.

Antwoord 6

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

Antwoord 7

Persoonlijk geef ik de voorkeur aan de truc om een ​​verborgen pseudo-element te gebruiken om de volledige hoogte van de buitenste container te overspannen en het verticaal uit te lijnen met de andere inhoud.
Chris Coyier heeft een mooi artikel over de techniek. http://css-tricks.com/centering-in-the-unknown/
Het grote voordeel hiervan is de schaalbaarheid. U hoeft de hoogte van de inhoud niet te kennen of u zorgen te maken dat deze groeit/krimpt. Deze oplossing schaalt :).

Hier is een fluitje van een cent met alle CSS die je nodig hebt en een werkend voorbeeld.
http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

Antwoord 8

Als je het nog steeds niet begreep na het lezen van de geweldige antwoorden hierboven.

Hier zijn twee eenvoudige voorbeelden van hoe u dit kunt bereiken.

Display gebruiken: table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}
.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Antwoord 9

Verticaal centreren van div-items binnen een andere div

Stel de container gewoon in op display:tableen vervolgens de binnenste items op display:table-cell. Stel een heightin op de container en stel vervolgens vertical-align:middlein op de binnenste items. Dit heeft een brede compatibiliteit tot in de dagen van IE9.

Houd er rekening mee dat de verticale uitlijning afhankelijk is van de hoogte van de bovenliggende container.

.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

Antwoord 10

Ik gebruik de volgende oplossing al meer dan een jaar, deze werkt ook met IE 7 en 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}
.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}
.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}
.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>
<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Antwoord 11

Dit werkt voor mij. Breedte en hoogte van de buitenste div kunnen worden gedefinieerd.

Hier de code:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}
.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

Antwoord 12

Fiddle-link < http://jsfiddle.net/dGHFV/2515/>

Probeer dit

  #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }
    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

Antwoord 13

Als je heightniet is ingesteld (auto); je kunt innerlijke div wat opvulling geven (boven en onder) om het verticaal in het midden te maken:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

Antwoord 14

voor innerdiv die de hoogtewaarde niet specificeert, is er geen pure css-oplossing om het verticaal gecentreerd te maken.

Antwoord 15

U kunt dit doen met een eenvoudig javascript (jQuery) blok.

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

Antwoord 16

probeer het innerlijke element als volgt uit te lijnen:

top: 0;
bottom: 0;
margin: auto;
display: table;

en natuurlijk:

position: absolute;

Antwoord 17

Je kunt de div verticaal en horizontaal centreren in CSS met flex;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    }
#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;
}

En de tweede is als volgt; 

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }
        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

En de resulterende HTML:

   <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

Antwoord 18

voer hier de afbeeldingsbeschrijving in100% het werkt

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}
    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

Antwoord 19

Een div verticaal centreren in een andere div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  background-color: lightgrey;  
}
#innerDiv{
  width: 284px;
  height: 290px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

Antwoord 20

Ik wil graag een andere cross-browser manier laten zien die deze vraag kan oplossen met behulp van CSS3 calc().

We kunnen de functie calc()gebruiken om de eigenschap margin-topvan de onderliggende div te besturen wanneer deze absoluut is gepositioneerd ten opzichte van de bovenliggende div.

Het belangrijkste voordeel van het gebruik van calc()is dat de hoogte van het bovenliggende element op elk moment kan worden gewijzigd en dat de onderliggende div altijd in het midden wordt uitgelijnd.

De margin-topberekening wordt dynamisch gemaakt (door css en niet door een script en het is een zeer groot voordeel).

Bekijk deze LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

Uitvoer:

voer hier de afbeeldingsbeschrijving in

Antwoord 21

tekst centreren op bovenliggend element, inline-blok weergeven op onderliggend element. Dit zal bijna alles centreren. Ik geloof dat het een “block float” wordt genoemd.

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->
<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

Dit is ook een goed alternatief voor float’s, succes!

Antwoord 22

Om zowel verticaal als horizontaal te centreren:

#parentDiv{
    display:table;
    text-align:center;
}
#child {
     display:table-cell;
     vertical-align:middle;
}

Antwoord 23

Dit werkt helemaal terug naar IE6!

<!DOCTYPE html>is ook vereist op IE6!
[ zal ook de standaard strikte modus van IE6 forceren ].

(natuurlijk, de kleur van de doos is alleen voor demo-doeleinden)

#outer{
        width: 180px;
        height: 180px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: center;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        display: inline-block;
        padding: .3em;
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,110,255,.7)}
<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

Antwoord 24

Ik weet dat die vraag een jaar geleden is gemaakt…
Hoe dan ook, bedankt CSS3, je kunt div eenvoudig verticaal uitlijnen in div (voorbeeld daar http://jsfiddle.net/mcSfe/98/ )

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}
Previous articleHoe kan ik vinden waar Python is geïnstalleerd op Windows?
Next articleZijn er woordenboeken in php?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

9 − 5 =

Other episodes

Hoe krijg ik de Stack-tracering bij het loggen van uitzonderingen met NLLog?

.net Code Expert - 0
Als ik de standaardlay-out gebruik met NLog, wordt alleen de naam van de uitzondering afgedrukt. Mij ​​is verteld dat de log4jxmlvent-lay-out niets over de uitzondering...
Read more

Hoe los ik een VSTO-add-in op die niet laadt?

.net Code Expert - 0
Mijn VSTO Outlook-invoegtoepassing werkte plotseling niet meer op de computer van één klant (hij laadt niet, geen foutmelding) en ik zit vast met het...
Read more

Waar is MSBuild.exe geïnstalleerd in Windows wanneer geïnstalleerd met BuildTools_Full.exe?

.net Code Expert - 0
Ik probeer een build-server voor .NET in te stellen, maar ik kan er niet achter komen waar MSBuild.exe is geïnstalleerd. Ik probeer MSBuild te installeren...
Read more

Nuget-verbindingspoging mislukt “Kan de service-index voor bron niet laden”

.net Code Expert - 0
Terwijl ik probeer verbinding te maken met Nuget, krijg ik de onderstaande foutmelding en kan ik geen verbinding maken: Kan de service-index voor de...
Read more

OAuth met verificatie in .NET

.net Code Expert - 0
Ik probeer een op .NET gebaseerde client-app te maken (in WPF - hoewel ik het voorlopig alleen doe als een console-app) om te integreren...
Read more

Hoe kan ik zien in welke staat ManualResetEvent zich bevindt?

.net Code Expert - 0
Ik gebruik een instantie van ManualResetEventom threadtoegang tot een bron te regelen, maar ik ondervind er problemen mee. Weet iemand hoe ik er tijdens...
Read more

Een enumwaarde doorgeven als opdrachtparameter vanuit XAML

.net Code Expert - 0
Ik wil een enum-waarde doorgeven als opdrachtparameter in WPF, met zoiets als dit: <Button x:Name="uxSearchButton" Command="{Binding Path=SearchMembersCommand}"...
Read more

© Copyright - Code Expert 2021