大小未知的垂直和水平居中元素，具有固定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/

Answer 1

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> 

Answer 2

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/