Center a Div Horizontally and Vertically and Keep Centered When Resizing The Parent

Center a div horizontally and vertically and keep centered when resizing the parent

You can do this with CSS tables:

JsFiddle

Markup

<div class="container">
    <div class="cent"></div>
</div>

(Relevant) CSS

    html,body
    {
        height: 100%;
    }
    body
    {
       display: table; 
       margin: 0 auto;
    }
    
    .container
    {  
        height: 100%;
        display: table-cell;   
        vertical-align: middle;    
    }
    .cent
    {
        height: 50px;
        width: 50px;
        background-color: black;      
    }

Center text vertically and horizontally over image when resized

Your css for your hero text looks good – If I'm understanding your question correctly, I think the image should be modified to use 100 viewport width / height rather than 100%.

body {
  margin: 0;
}

.hero-image img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Center container horizontally and vertically

I think this is what you want, in Chrome at least... http://jsfiddle.net/h6Lh9z0e/4/

Slightly modified HTML

<div id="container">
    <div id="inner-container">
    <p>This is the container.</p>
    <p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
    <p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
    </div>
</div>

More modified CSS

#container {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ff0;
display:flex;
align-items:center;
justify-content:center;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-ms-flexbox;
-ms-flex-align:center;
-ms-flex-pack:center;

}
    #container #inner-container {
        border:solid 1px black;
        padding:10px;
        width:300px;
        height:300px;
    }

I'm not sure about things like IE though, haven't had to work with that for a long time, but I know it doesn't support webkit.

Sorry for the half answer, but hopefully it'll help some.

EDIT: Ok, so turns out you can add in MS specific flexbox code to center it, but you still get the same disappearing top issue when you shrink the window vertically...

EDIT 2: Right, turns out that the -ms prefix is being depreciated from IE10 onwards (http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx), so looks like you'll need to put non-prefixed names as well.

How can I horizontally center an element?

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

How center text of column according to height of div in html?

apply
display:flex;
to parent div

---

Related Topics