Center a div horizontally and vertically even on resize

Question

I saw this asked a few times but all of the answers messed up my height.

    #transbox {

            position: fixed;
            top: 150px;
            right: 320px;
            width: 600px;
            height: 210px;
            background-color: #fff;
            border: 1px solid #000;
            opacity: 0.7;
            filter: alpha(opacity=60); 
            }

<div id="transbox">

<div id="title">navigation</div>


    <div id="navigation">
        <table style="width:100%">
            <tr>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
            </tr>

            <tr>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
            </tr>

            <tr>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
                <td><a href="/">link</a></td>
            </tr>
        </table>
    </div>

</div>

That is a div and it's CSS and I want to make it so that the height is the same as the content inside it so if I have a specific height (like I do at the moment) it will limit it but all the answers I have seen for centering horizontally and vertically even on page resize rely on a specific height

Thanks

Well, centering vertically is much more challenging than centering horizontally. Most solutions require specific heights. A lot of people use Javascript to find the height of the content, position the div 50% from top, then margin-top would be negative half the div's calculated height. — Phil Tune, Dec 05 '14 at 21:44
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Phil Tune, Dec 05 '14 at 21:45
Hmm ok @philtune, I did have it in my old files but I stupidly didn't make a backup and it was lost — P3iahsd8, Dec 05 '14 at 21:46

Purag · Accepted Answer · 2014-12-05T22:19:13.920

One of your options is to use flexbox. There's a snippet below -- you can see that it works by clicking "full page" when running it:

html, body { height: 100%; margin: 0; }
#container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#transbox {
  position: relative;
  width: 600px;
  background-color: #fff;
  border: 1px solid #000;
}

<div id="container">
  <div id="transbox">
    <div id="title">navigation</div>
    <div id="navigation">
      <table style="width:100%">
        <tr>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
        </tr>
        <tr>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
        </tr>
        <tr>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
          <td><a href="/">link</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

For this option, you'll need to have a container (it can be any height, but for this demo I made it full height). Then, on the container, you apply display: flex and then align the content to the center horizontally and vertically using align-items and justify-content.

Keep in mind that the only child, or item, in the flexbox is the .transbox element, so it will be aligned accordingly.

score 0 · Answer 2 · edited Feb 16 '20 at 16:44

0

you can align center a DIV and content horizontally and vertically

.content{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  padding-top: 0px !important;
}

Demo: https://jsfiddle.net/nivinnv/wxmst7fr/

edited Feb 16 '20 at 16:44

Kalle Richter

8,008
26
77
177

answered Dec 29 '16 at 08:35

Nivin NV

1
1

Center a div horizontally and vertically even on resize

2 Answers2