Good resources

https://blog.logrocket.com/13-ways-to-vertical-center/

Classic align middle method

.the_style_of_the_container {
  position: relative;
}
.the_style_of_my_element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /*For text can need 54%*/
}

The translateY repositions the element vertically so that it becomes centered at the 50% point itself

For center aligned text:

.the_style_of_my_element{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /*For text can need 54%*/

  text-align: center;
  width: 100%;
}

Place an image in the center of the browser window

  <div style="top:0; right:0; bottom:0; left:0; position:fixed !important; position:relative;">
    <div style="position: absolute; top: 50%; transform: translateY(-50%); height: 200px; width:100%;">
      <div style="width:200px; margin-left:auto; margin-right:auto; text-align:center;">
        <img src="images/logo.png" width="200" height="200" alt=""/>
      </div>
    </div>
  </div>

Placing text at the bottom of the screen

  <div style="top:calc(100vh - 16px); right:0; bottom:0; left:0; position:fixed !important; position:relative;">
    <div style="text-align:center; font-size:10px;">
      <span>Links</span>
    </div>
  </div>
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *