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>

Antwoord 24

Je kunt zoiets als dit doen

#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;
}

Hiermee wordt de #innerook verticaal uitgelijnd. Als u dat niet wilt, verwijdert u de eigenschappen displayen vertical-align;

Antwoord 25

Flex heeft meer dan 97% dekking voor browserondersteuning en is wellicht de beste manier om dit soort problemen binnen een paar regels op te lossen:

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

Antwoord 26

Dit is wat je op de kortste manier wilt.

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 % );
}

Antwoord 27

Je kunt display: flexgebruiken voor je buitenste div en om horizontaal te centreren moet je justify-content: center

toevoegen

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

of u kunt w3schools – CSS flex Propertybezoeken voor meer ideeën.

Antwoord 28

Deze methode werkt ook prima:

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

Voor de binnenste <div>is de enige voorwaarde dat de heighten widthniet groter mogen zijn dan die van de container.

Antwoord 29

Nou, ik heb een oplossing gevonden die misschien in alle situaties past, maar die JavaScript gebruikt:

Hier is de structuur:

<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>

En hier is het JavaScript-fragment:

$(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);
  })
});

Als u het in een responsieve benadering wilt gebruiken, kunt u het volgende toevoegen:

$(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);
  })
});

Antwoord 30

Er was één optie die ik vond:

Iedereen zegt te gebruiken:

margin: auto 0;

Maar er is nog een andere optie. Stel deze eigenschap in voor de bovenliggende div. Het
werkt altijd perfect:

text-align: center;

En kijk, kind ga naar het midden.

En tot slot CSS voor jou:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}
#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}