Replacing vertical:middle, align:center tabling with a div structure

Question

Most of the things I create I need centered, but able to scale if necessary, so I use a table layout to help center content as I've done for years. However, wit the introduction of flex I believe this has been made more efficient ( less html ). I've done some research but haven't gotten to a proper cross-browser solution in the time alloted.

So very simply, I need to replace the following code:

 <style>
  .app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
  .app-frame td {vertical-align:middle;text-align:center;}
  .app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
  </style>

  <table class="app-frame">
    <tr>
      <td>
        <div class="app-content">
          <!--app-->

          <div class="slide" id="slide1">
            <h1>Step 1: Name your character.</h1>
            <p class=info>You can change this at any time after creation.</p>
            <label>Character's Name</label>
            <input name="charname" />
          </div>


          <!--/app-->
        </div>
      </td>
    </tr>
  </table>

with a solution that allows me to use divs, like so:

<div class="app-frame">
    <div class="app-content"> ... </div>
</div>

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Fabian Horlacher, Jan 16 '17 at 00:45
[**How to Center Elements Vertically and Horizontally in Flexbox**](http://stackoverflow.com/a/33049198/3597276) — Michael Benjamin, Jan 16 '17 at 01:38
Fabian H's link does not offer a practical response, but i'll accept that this is a duplicate of How to Center Elements Vertically and Horizontally in Flexbox. Thank you. — Tyler James, Jan 16 '17 at 02:01

score 1 · Answer 1 · answered Jan 16 '17 at 00:40

1

This is how to horizontally center a div with css flexbox:

.app-frame{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%
}

<div class="app-frame">
    <div class="app-content">Centered DIV</div>
</div>

It's more flexible as you can change your layout without touching the HTML.

answered Jan 16 '17 at 00:40

Fabian Horlacher

1,899
1
24
31

Thanks! This is also what I was looking for. – Tyler James Jan 16 '17 at 02:01

score 1 · Accepted Answer · answered Jan 16 '17 at 01:30

These are the settings (for the container element) with which you can center all included elements vertically and horizontally using flex:

.slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

.slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

<div class="app-frame">
    <div class="app-content"> 
      <div class="slide" id="slide1">
            <h1>Step 1: Name your character.</h1>
            <p class=info>You can change this at any time after creation.</p>
            <label>Character's Name</label>
            <input name="charname" />
          </div>
  
  </div>
</div>

Thanks! This is what I was looking for. – Tyler James Jan 16 '17 at 02:01 — Tyler James, Jan 16 '17 at 02:01

Replacing vertical:middle, align:center tabling with a div structure

2 Answers2