CSS3: Vertically align an element while siblings maintain relative position - css

Question

I would like to center an element vertically and horizontally. The catch is that any sibling elements should maintain their position relative to the centered element. If the siblings are large enough, they may overflow the viewport. The siblings have variable heights.
I've started a code sample here: 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>
This is easily accomplished using JS and negative margins but I would like to do it only with CSS. Is there a way to do this using flex?

Answer 1

You can use 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>

Answer 2

setting negative margin to virtually reduce width down to zero for extra-info, using display:table to shrink on content and and center, you could do something like this :
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 3

I am not sure I quite understand what do you want but maybe ?
#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>
You also can do it with margin only by setting left margin to 40% or 35% depending on your box width