How to Vertically Center a Div Element For All Browsers Using Css

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

In a nutshell _{^{(and to prevent link rot)}}:

• Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
• For block elements, vertical alignment is harder and strongly depends on the specific situation:
  
  • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
  • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
  • … there are more such special cases.

How to vertically center text when using the :before modifier in CSS?

You can use flexbox.

.status-yellow {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 400;
    line-height: 1;
    color: #000;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    text-transform: uppercase;
    background-color: #fff;
    display:flex;
    align-items:center;/*for vertical align*/
    justify-content:center;/*for horizontal align*/
}

.status-yellow:before {
        display: inline-block;
        content:"\2022";
        margin-right: 0.5rem;
        color: yellow;
        font-size: 48px;
    }

How to vertically center a div on page?

Method 1 (position, transform-translate):

* {  padding: 0;  margin: 0;}.parent {  position: relative;  left: 0;  top: 0;  width: 100vw;  height: 100vh;  background-color: gray;}.child {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 10em;  height: 5em;  background-color: white;  box-shadow: 1px 1px 10px rgba(0,0,0,.4);}

<div class="parent">  <div class="child"></div></div>

.container {    position: absolute;    top: 50%;    left: 50%;    -moz-transform: translateX(-50%) translateY(-50%);    -webkit-transform: translateX(-50%) translateY(-50%);    transform: translateX(-50%) translateY(-50%);}

<div class="container">    <span>I'm vertically/horizontally centered!</span></div>