how to vertically auto-center a div child element?

Question

I'm looking to use auto-center values for two div elements .main_h2 and .first_button, which are the child of div #demo. I tried to use position:relative for parent and position:absolute for child but unable to put elements in center.

The Code:

<!doctype html>
<html>
  <head>
    <style>
      #demo {
        width: 1440px;
        height: 592px;
        border: 0.1px solid #87509c;
        background-color: #87509c;
        position: relative;
      }
      .logo {
        position: absolute;
        top: 50px;
        background-image: url("logo.jpg");
        width: 117px;
        height: 40px;
        margin-left: 210;
        margin-top: 54;
      }
      ul {
        list-style-type: none;
        position: absolute;
        top: 47px;
        right: 10%;
      }
      ul, li {
        float: right;
        margin-left: 30px;
        padding: 10px;
        font-size: 12pt;
        color: white;
        font-family: tahoma;
      }
      .main_h2 {
        font-size: 32.16pt;
        color: white;
        text-align: center;
        position: absolute;
        top: 235px;
        left: 260px;
        width: 60%;
      }
      .first_button {
        position: absolute;
        top: 381px;
        left: 572px;
        background-color: #eb7d4b;
        color: white;
        padding: 10px;
        text-align: center;
        font-size: 8pt;
        height: 60px;
        width: 283;
      }
    </style>
  </head>
  <body>
    <div id="demo">
    </div>
    <div class="logo">
    </div>
    <ul>
      <li>WORK</li>
      <li>WORK</li>
      <li>BLOG</li>
      <li>CONTACT</li>
      <li>HOME</li>
    </ul>
    <div class="main_h2">
      Hi there! We are the new kids on the block 
      and we build awesome websites and mobile apps.
    </div>
    <button class="first_button">WORK WITH US!</button>
  </body>
</html>

I think there are already thousands questions and answers about that here on stackoverflow and on the web in general. Look [here](https://css-tricks.com/centering-in-the-unknown/) for example or [here](https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/) for a flexbox solution — michaPau, Apr 01 '16 at 11:28
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Gandalf the White, Apr 01 '16 at 11:31

score 0 · Accepted Answer · answered Apr 01 '16 at 12:11

Try something like this:

#demo {
    width: 100%;
    height: 100%;
    border: 0.1px solid #87509c;
    background-color: #87509c;
}
.header {
    display: flex;
}
.logo {
    position: relative;
    top: 25px;
    left: 25px;
    background-image: url("logo.jpg");
    width: 117px;
    height: 40px;
    background-color: white;
}
ul {
    list-style-type: none;
}
ul, li {
    float: right;
    margin-left: 30px;
    padding: 10px;
    font-size: 12pt;
    color: white;
    font-family: tahoma;
}
.main_h2 {
    font-size: 32.16pt;
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    width: 60%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
}
.first_button {
    position: relative;
    background-color: #eb7d4b;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 8pt;
    width: 283px;
    transform: translate(-50%);
    left: 50%;
    margin-top: 10px
}

<body>
    <div id="demo">
        <div class="header">
            <div class="logo">
            </div>
            <div>
                <ul>
                    <li>WORK</li>
                    <li>WORK</li>
                    <li>BLOG</li>
                    <li>CONTACT</li>
                    <li>HOME</li>
                </ul>
            </div>
        </div>
        <div style="height:500px;">
            <div class="main_h2">
                Hi there! We are the new kids on the block 
                and we build awesome websites and mobile apps.
                <button class="first_button">WORK WITH US!</button>
            </div>
        </div>
    </div>
</body>

how to vertically auto-center a div child element?

1 Answers1