CSS3：垂直对齐一个元素，同时兄弟姐妹保持相对位置

Question

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

我在这里开始了一个代码示例：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 来做到这一点？

Answer 1

设置负边距以将额外信息的宽度实际上减小到零，使用 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>

Answer 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% 来设置边距，具体取决于您的框宽度

Answer 3

你可以使用 flexbox：

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

CSS3：垂直对齐一个元素，同时兄弟姐妹保持相对位置

CSS3: Vertically align an element while siblings maintain relative position

css

alignment

vertical-alignment

flexbox