Vertically and horizontally centering element of unknown size with block sibling in fixed div

Question

I have a sidebar fixed to the left of the screen.

I have the current time in a paragraph tag at the top of the sidebar. The width of this element is what sets the width of the sidebar.

What I am struggling with is then adding another paragraph to the sidebar which is centered horizontally and vertically in the sidebar.

I've looked at many other examples of centering elements but can't seem to get it. Help is much appreciated.

Basic structure:

<div id="left">
  <p id="time">
    12:03<span>45</span>
  </p>
  <p id="currentWeather">
    <!-- I've replaced this <i> with an <img> to avoid loading the font in the fiddle -->
    <i class="wi wi-day-sunny"></i>
    <img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png">
    <span>32</span>
  </p>
</div>

Fiddle: https://jsfiddle.net/w5m7qd6u/1/

centered horizontally and vertically similar like image or under time — Venkat.R, Jan 19 '16 at 05:18
here's a solution that uses position absolute https://jsfiddle.net/cattails27/w5m7qd6u/2/, however this question has been asked and answered many times in SO already. — jkris, Jan 19 '16 at 05:20
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — jkris, Jan 19 '16 at 05:20
@jkris that solution does not position the #currentWeather exactly in the center, vertically — RPL, Jan 19 '16 at 06:38

RPL · Accepted Answer · 2016-01-19T06:32:09.023

Perhaps this is what you're looking for...

A combination of height: 100vh on a parent element, setting the top element to be position: absolute and thereby not positioned vertically, and adding styles to the <p> which you will vertically center:

#currentWeather {
  top: calc(50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

Full code and snippet below: (view full page for clarity)

I commented out the font sizes to make this easier on me with a smaller window, but that shouldn't affect it.

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", Helvetica, sans-serif;
}

#left {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100vh;
  box-sizing: border-box;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}

#time {
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  /* font-size: 90pt; */
}

#time > span {
  margin-left: 6px;
  /* font-size: 24pt; */
}

#currentWeather {
  position: relative;
  left: 0;
  /* font-size: 84pt; */
  margin: auto;
  top: calc(50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#currentWeather > span {
  display: block;
  /* font-size: 40pt; */
}


/* this is just a placeholder. real image is dynamic and won't have set height */

img {
  width: 124px;
  height: auto;
}

<div id="left">
  <p id="time">
    12:03<span>45</span>
  </p>
  <p id="currentWeather">
    <!-- <i class="wi wi-{{currentConditions}}"></i> -->
    <!-- have used image for placeholder to avoid uploading font -->
    <img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png"><span>32</span>
  </p>
</div>

score -1 · Answer 2 · answered Jan 19 '16 at 06:50

html

<div id="left">
  <p id="time">
    12:03<span>45</span>
  </p>
  <div id="hvcenterme">
     <p>
       Another Paragraph centered both ways.
     </p>
  </div>
  <p id="currentWeather">
    <!-- <i class="wi wi-{{currentConditions}}"></i> -->
    <!-- have used image for placeholder to avoid uploading font -->
    <img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png"><span>32</span>
  </p>
</div>

css

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", Helvetica, sans-serif;
}

#left {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}

#time {
  flex:0 0 auto;
  margin:0;
  font-size: 90pt;
}

#time > span {
  margin-left: 6px;
  font-size: 24pt;
}

#hvcenterme {
   flex:1 0 auto;
   margin:0;
   width:100%;
   display:flex;
   background:Green;
}

#hvcenterme p {
  flex:1 0 100%;
  line-height:1.5em;
  margin:0;
  text-align:center;
  align-self:center;
  background:Blue;
}

#currentWeather {
  flex:0 0 auto;
  font-size: 84pt;
  margin:0 auto;
}

#currentWeather > span {
  display: block;
  font-size: 40pt;
}

/* this is just a placeholder. real image is dynamic and won't have set height */
img {
  width: 124px;
  height: 112px;
}

JSFiddle link

https://jsfiddle.net/w5m7qd6u/7/

Vertically and horizontally centering element of unknown size with block sibling in fixed div

2 Answers2