CSS3：在同级元素保持相对位置时垂直对齐元素答案

【问题标题】：CSS3: Vertically align an element while siblings maintain relative positionCSS3：在同级元素保持相对位置时垂直对齐元素
【发布时间】：2016-06-02 09:44:31
【问题描述】：

我想将一个元素垂直和水平居中。问题是任何兄弟元素都应该保持它们相对于居中元素的位置。如果兄弟姐妹足够大，它们可能会溢出视口。兄弟姐妹的身高不同。

我在这里开始了一个代码示例：https://jsfiddle.net/hqmoz9xy/2/

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 1em;
}

body,
.container {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  padding: 1em;
  width: 100%;
  height: 100%;
}

.main-display {
  width: 100px;
  height: 100px;
  background-color: #999;
  padding: 1em;
}

<div class="container">
  <div class="main-display">
    Main box: this box should be at the center of the container.
  </div>
  <ul class="extra-info">
    <li>These items should naturally follow the main box and not care about vertical centering.</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

这很容易使用 JS 和负边距来完成，但我只想使用 CSS 来完成。有没有办法使用 flex 做到这一点？

【问题讨论】：

“有没有办法使用 flex 来做到这一点？” - 不……没有。流中的任何东西都会影响它周围的元素。将其从流中取出（如绝对定位），然后居中是最合适的方法。

标签： css alignment flexbox vertical-alignment

【解决方案1】：

你可以使用弹性框：

.container {
  display: flex; /* Magic begins */
  flex-direction: column;
}
.before, .after {
  flex: 1; /* If possible, center .main vertically */
  min-height: 0; /* Really, don't care about overflow, just center .main vertically */
}
.main {
  align-self: center; /* Center .main horizontally */
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 1em;
}
body,
.container {
  box-sizing: border-box;
}
.container {
  border: 1px solid red;
  padding: 1em;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.before,
.after {
  flex: 1;
  min-height: 0;
}
.main {
  width: 100px;
  height: 100px;
  background-color: #999;
  padding: 1em;
  align-self: center;
}

<div class="container">
  <div class="before"></div>
  <div class="main">
    Main box: this box should be at the center of the container.
  </div>
  <div class="after">
    <ul class="extra-info">
      <li>These items should naturally follow the main box and not care about vertical centering.</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案2】：

我不确定我是否完全理解你想要什么，但也许？

#main {
width: 100%;
height: 100px;
border: 0px;
display: -webkit-flex; 
display: flex;
 }

#main div {
-webkit-flex: 1;  
-ms-flex: 1;      
flex: 1;
 }


  <div id="main">
  <div style="background-color:white;">empty</div>
  <div style="background-color:Blue;">Your box here</div>  
   <div style="background-color:white;">empty</div>
   </div>

您也可以仅通过将左边距设置为 40% 或 35% 来使用边距，具体取决于您的框宽度

【讨论】：

【解决方案3】：

设置负边距以将额外信息的宽度几乎减小为零，使用 display:table 缩小内容和中心，您可以执行以下操作：

html,
 {
  height: 100%;
}
body {
  min-height:100%;
  border: 1px solid red;
}
body,
.container {
  box-sizing: border-box;
}
.container {
  padding: 1em;
  display: table;
  margin: auto;
}
.main-display {
  width: 100px;
  height: 100px;
  background-color: #999;
  padding: 1em;
}
.extra-info {
  padding:0;
  margin:0;
  background:lightgray;
  margin-right: -50vw;
  max-width: 50vw
  /* size virtually reduce to zero with equal negative margin value*/
}

<div class="container">
  <div class="main-display">
    Main box: this box should be at the center of the container.
  </div>
  <ul class="extra-info">
    <li>These items should naturally follow the main box and not care about vertical centering.</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

【讨论】：