<div id="hhh1"><br><br><br>
<span class="x-display-topmiddle x-hide-small" style="margin-top:16px" >▲</span>
<span class="x-display-bottommiddle x-hide-small" style="margin-bottom:16px">▼</span>
<div class="x-center x-display-container" style="background-color:red;color:white; max-width:400px; margin:auto;padding: 15px">
<span class="x-display-left x-hide-small" style="left:-30px">◀</span>
<span class="x-display-right x-hide-small" style="right:-30px">►</span>
  <p>align elements layout<br>center, bottom, left, right</p>
</div></div>

.x-display-topmiddle{position:absolute;left:50%;top:90;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);color:white;}
.x-display-bottommiddle{position:absolute;left:50%;bottom:140;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);color:white;}
.x-hide-small{display:true!important}
.x-center{text-align:center!important}
.x-display-container:hover .x-display-hover{display:block}.x-display-container:hover span.x-display-hover{display:inline-block}.x-display-hover{display:none}
.x-display-container{position:relative}
.x-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.x-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}

<iframe src="https://www.netbax.net/tab/css/css-align-property.html" style="width: 550px; height:550px;" frameborder="0"></iframe>