你可以做这样的事情

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

這也會垂直調整 #內部. 如果你不願意,移除顯示器和垂直調整的特性;

好吧,我找到了一个可能适合所有情况的解决方案,但使用JavaScript:

这里是结构:

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

此分類上一篇: JavaScript snippet:

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

如果你想用它在一个响应性方法,你可以添加以下:

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

你可以做这样的事情

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

這也會垂直調整 #內部. 如果你不願意,移除顯示器和垂直調整的特性;

CSS

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

HTML

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

这里还有另一种方式可以用Flexbox垂直集中,而无需向内部容器指定任何宽度,想法是使用虚构元素,将从右侧和左侧推内部内容。

.container { 显示: flex; 边界: 1px 固体; }.container:前,.container:后 { 内容: "; flex: 1; }.inner { 边界: 1px 固体红色; 粘贴: 5px; } <div class="container"> <div class="inner"> Foo 内容 </div> </div>

我们也可以考虑到垂直调整的相同情况,简单地改变旋转到列的方向:

.container { 显示: flex; flex 方向: 列; 边界: 1px 固体; min 高度: 200px; }.container:前,.container:后 { 内容: "; flex: 1; }.inner { 边界: 1px 固体红色; 粘贴: 5px; } <div class="container"> <div class="inner"> Foo 内容 </div> </div>

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