Vertical Alignment using CSS3

by Ravindra Athreya

HTML

<div class='container'>
<p>
Testing...
</p>
</div>

<section>
   <h1>Nicely centered</h1>

   <p>This text block is vertically centered.

   </p><p>Horizontally, too, if the window is wide enough.
  </p></section>

CSS

div.container {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid red;
  }
div.container p {
  margin: 0;
  text-shadow:2px 2px 2px orange;
  }
  
   section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }