195

Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.

I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?

I have the example here to play: http://jsbin.com/iquviq/1/edit

CSS:

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"

3
  • My question is different than: "Best way to center a <div> on a page vertically and horizontally?". As I asked very clearly at the beginning "the content will not be cut when the window is smaller than the content"
    – Nrc
    Mar 18, 2015 at 9:31
  • 4
    @Josh Crozier: My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked two years ago. The other question was asked one year ago. 2- My question ask very clearly and in black: "the content will not be cut when the window is smaller than the content"
    – Nrc
    Apr 24, 2015 at 10:16
  • Check this tutorial for aligning a div horizontally and vertically using CSS: frontendguruji.com/blog/… Jan 2, 2022 at 17:35

6 Answers 6

289

For modern browsers

When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.

HTML:

<div class="content">This works with any content</div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Tinker with it further on Codepen or on JSBin

For older browser support, look elsewhere in this thread.

3
  • 1
    It does not work with the condition: "the content will not be cut when the window is smaller than the content" I test it here: jsfiddle.net/9cLamaoL
    – Nrc
    Apr 24, 2015 at 10:12
  • 1
    Why do you have to use the transform: translate?
    – Robert
    Dec 23, 2022 at 16:31
  • @Robert: According to what I understand, position: absolute will bring the anchor point to the top left of your element. By using transform: translate(-50%, -50%), we bring the anchor point to the center of the element. This is not necessarily needed, but if you do not use translate, your top and left values would be a bit different to achieve the same result.
    – Lam Le
    May 9 at 7:40
190

After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}
6
  • 3
    Nice to have a version without table-cell, thanks.
    – devlord
    Dec 20, 2013 at 19:01
  • Thanks. Which browsers support this technique? Are any major modern or older browsers unsupported? What about mobile browsers? Mar 9, 2014 at 6:15
  • 1
    @AlcubierreDrive: I could test it in all major modern browsers and iOS and it works well. I could not test in Android nor windows 8. I would appreciate if someone tells me. In IE8 it only works if the .content is smaller than the browser. It does not work in IE7 and before. In January 2014: IE8 is 3.1%, IE7:0,4% w3schools.com/browsers/browsers_explorer.asp
    – Nrc
    Mar 9, 2014 at 13:02
  • 2
    Maybe a bit late, but this also works with win8 and win8.1 (IE 10 and 11). Thanks btw.
    – BudBrot
    Jun 18, 2014 at 11:25
  • 3
    also make sure that the parent (container) div has its position set to relative; .parent {position:relative;}
    – Sean12
    Aug 12, 2016 at 2:26
56

Here's a demo: http://www.w3.org/Style/Examples/007/center-example

A method (JSFiddle example)

CSS:

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

HTML:

<div id="content">
    Content goes here
</div>

Another method (JSFiddle example)

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>
4
  • The first method works with text but does it works with a div? I try it here and something goes wrong:jsbin.com/iquviq/12/edit
    – Nrc
    Jan 2, 2013 at 15:09
  • Your examples are good for center text but I have asked for center a div horizontally and vertically. Have you try this with a div?
    – Nrc
    Jan 2, 2013 at 15:14
  • The 2 examples are with divs (<div id="content"> and <div id="main">). In the divs you can insert whatever you want (text, images, etc). Jan 2, 2013 at 15:17
  • This is very good to center a text or an img. But what I was asking is very different. Can anyone apply this to the code asked: center a div with a background color, a width and a hight?
    – Nrc
    Mar 9, 2014 at 11:45
7

The legitimate way to do that irrespective of size of the div for any browser size is :

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

Live Code

1
  • 1
    You are nor answering "the content will not be cut when the window is smaller than the content" The other part is the same that my answer posted before
    – Nrc
    Apr 24, 2015 at 10:18
1

You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.

I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}
4
  • I tried all the methods in that tutorial before asking here and it did not work. I just copy paste that method 3 here: jsbin.com/uhukuk/1/edit and it does not centered. What am I missing?
    – Nrc
    Jan 2, 2013 at 15:03
  • @Nrc You need to add CSS to your JSBin... Also, don't put content inside floater, but just after it. See my JSBin for a working example : jsbin.com/iquviq/7/edit
    – clement g
    Jan 2, 2013 at 15:33
  • Your JSBin in practice works but if I copy paste the code in any html it does not. I tried so many things! I don't understand. On the other side, I don't understand why you put the floater outside. In the blog you mention it is clearly inside. I'm really confused.
    – Nrc
    Jan 5, 2013 at 12:43
  • I copy-paste your code in the jsFiddle: jsfiddle.net/6uAMm This is how I see it if I put it in any html.
    – Nrc
    Jan 5, 2013 at 12:52
1

I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.

My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.

So, with this HTML:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>  

This CSS:

.parentElement {  
  position:relative;
  width:960px;
}
.childElement {
  position:absolute;
  top:50%;
  left:50%;
}

This jQuery might be useful:

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).

4
  • I just copy/paste your code here and it does not seem to work. Am I missing something? jsbin.com/owuwem/1/edit
    – Nrc
    Jan 5, 2013 at 12:48
  • I have broken out the code, and it appears to work... jsbin.com/owuwem/2/edit Hope this helps!
    – oomlaut
    Jan 7, 2013 at 15:17
  • Your option centers vertical and horizontal but I think "the content will be cut when the window is smaller than the content?" Give the child a height: jsbin.com/owuwem/4/edit
    – Nrc
    Jan 8, 2013 at 16:01
  • After removing the height:100%; from .parentElement in the css, any height value that I assign to the child will be reflected by the parent. The above JavaScript will make the necessary adjustments to the parent element.
    – oomlaut
    Jan 9, 2013 at 15:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.