lyrically wicked lyrically wicked - 2 months ago 6
CSS Question

How to get a perfectly centered element (which is surrounded by two independent elements) within an absolutely positioned window-centered container?

I have a markup that should look like this:

<div id="container">
<div id="left">
It is the primary text.
</div>
<div id="center">
Hi!
</div>
<div id="right">
some content
</div>
</div>


The block-level
#container
element should be absolutely positioned and perfectly centered by the width (not by the height!) of the entire browser window:

#container {
display: block;
width: 95vw;
background-color: white;
position: absolute;
top: 75px;
}


The block-level
#center
element will have no predefined width or height, its dimensions are unpredictable and it should take as much space as it is needed (but maybe it will have predefined
max-height
/
max-width
value). EDIT / Clarification: it should take minimal required width/height, which means that it will take 20 pixels for padding, and some small amount of pixels for "Hi!", and nothing more, so in this case, it will be very small relatively to the container.

#center {
display: block;
background-color: green;
padding-left: 10px;
padding-right: 10px;
}


The block-level
#left
element should take all possible remaining space of the #container, and it will also have
text-overflow: ellipsis
property:

#left {
display: block;
background-color: red;
padding-left: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}


The
#right
element should take all possible remaining space of the #container. It has no special properties, but it is just an independent block-level element which can contain anything.

#right {
display: block;
background-color: blue;
}


The result should look like this (in the example below, it is assumed that there is no space to contain the
"ext."
substring of the
#left
element, and it is replaced with an ellipsis):

--------------------------WINDOW EDGE--------------------------
| | |
| | |
W (75 px) W
I | I
N | N
D +—————————————————————————————————————————————————————————+ D
O | It is the primary t...| Hi! |some content | O
W +—————————————————————————————————————————————————————————+ W
<- - - - - - - - - - - - -(95 vw)- - - - - - - - - - - - ->
E E
D D
G G
E E


Note that distances between left/right borders of
#container
and left/right edges of the window should be equal:
(100vw - 95vw)/2 = 2.5vw
.

How to achieve this? I have read all possible explanations of how to center an element, but cannot find the answer to this specific problem... All I see is to apply predefined dimensions to each element, and then aplly the absolute positioning to each element independently... which is not what I want.

Answer

You will need to use display:flexbox; to create a "perfect center divs".

#container {
  display: flex;
  width: 95vw;
  background-color: white;
  position: absolute;
  top: 75px;
  justify-content: center;
  flex-flow: row nowrap;
  left: 0; 
  right: 0; 
  margin:auto;
}

#center {
  display: inline-block;
  background-color: green;
  padding-left: 10px;
  padding-right: 10px;
  align-self: center;
  text-align: center;
  animation: center;
  width:auto;
}

#left {
  display: inline-block;
  background-color: red;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 35%;
  flex-grow: 1;
}

#right {
  display: inline-block;
  background-color: blue;
  flex-grow: 1;
  width: 35%;
}

Note here: you need to defined #left and #right width equally to make it perfectly center.

Demo here: https://jsfiddle.net/usytj8gm/3/