LeFizzy LeFizzy - 1 year ago 42
CSS Question

How to align a text below text to keep them in middle of div?


<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>

Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(

Thank you for help! :)
I draw an interactive image,click here.

Answer Source

You can achieve this using translateX() property. Check this snippet!

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  padding:5px 10px;
<div class="wrapper">
  <div class="inner">
    <h1>Aligned h1 element</h1>
    <p>Aligned p element</p>
    <div>Aligned div element</div>


Here's an another approach to center the div content. Replace all your CSS with this one to get it work. Hope this helps!

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
.wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;