CSS: Responsive Way to Center a Fluid Div (Without Px Width) While Limiting The Maximum Width

CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

Centering both horizontally and vertically

Actually, having the height and width in percents makes centering it even easier. You just offset the left and top by half of the area not occupied by the div.

So if you height is 40%, 100% - 40% = 60%. So you want 30% above and below. Then top: 30% does the trick.

See the example here: http://dabblet.com/gist/5957545

Centering only horizontally

Use inline-block. The other answer here will not work for IE 8 and below, however. You must use a CSS hack or conditional styles for that. Here is the hack version:

See the example here: http://dabblet.com/gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

EDIT

By using media queries you can combine two techniques to achive the effect you want. The only complication is height. You use a nested div to switch between % width and

http://dabblet.com/gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}

CSS Responsive Center Div

I wanted to do the same thing 2 years ago, there's the solution:

Because you want it responsive, you may use the @media function in CSS3. Like this:

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

The max-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!

It will center the image on the page.

You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.

You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.

EDIT: JSFiddle

Center fluid grid of elements without setting hard width on parent

It's still a little vague as to what your exact requirements are for centering (as in, all your illustrations above show an even number of elements, so I don't know what you expect for odd number. In your fiddle, I just added a text-align: center to the ul and achieved a centering effect ( http://jsfiddle.net/nR9Mk/1/ ), but I don't know if it is behaving as you desire.

Update: If you are only dealing with even numbers and you want them to remain grouped by two's, then this would work: http://jsfiddle.net/nR9Mk/8/.

ROUND 2: Based on your revealed "odd number" requirements, I have come up with a solution that works. Note: 1) it does require some extra HTML markup, 2) you have to set some type of practical limit to how wide you want to go and still get the effect. Here is the code with the "buffer" elements revealed by an outline and here is it with the outline removed.

ROUND 3: I know you already accepted my answer, but I was already working on this, so I figured I would offer it anyway. Based on your deal breaker comment, here is a modified plan that may be useful for you (or someone else). It is a hybrid -- "sometimes" it pushes the elements left (usually when it would be most awkward to not) and sometimes lets them stay "off column" but centered. To keep it from ever looking plain "weird" it is given a max-width of six columns wide.

Responsive layout: middle content of centered div with fixed width must become the right column without overflowing

There are three problems in one:

First problem.

How to transform a middle content

<div class="wrapper">
    <div>stuff</div>
    <div class="aside">Middle content</div>
    <div>stuff</div>
</div>

in a right column that expends to the right without overflowing out of the window, when the rest of the past column "wrapper" must be a centered column of fixed width.

<div class="colLeft"></div>
<div class="wrapper" style="text-align:center; width:700px;">
    <div>stuff</div>
    <div>stuff</div>
</div>
<div class="aside">Middle content now to the right</div>

Absolute positioning doesn't help because without fixed sizes (% or px), it is out of the flow and the content of variable width won't adapt to the situation (and overflow).

This can be easily solved with display table.

Second problem.

Display table/table-cell leads to the second problem.

To make three "columns" with display:table-cell, order is really important. That means the "aside" div must be the last element of its column (the wrapper column in my first snippet) in order to make it an independent cell of a row put to the right. If you don't have to worry about this story of middle content and you just have to switch a content at the end of a div to the right or a content at the beginning to the left, it's already over.
You just have to style colLeft, wrapper and aside of my second snippet with display:table-cell and use another global wrapper with display:table and some other styles like table-layout:fixed and width:100% to do the trick. With a media queries for small screen, you just have to hide the colLeft with display:none.

But if you need that middle content to be a middle content nonetheless on small screens and a right column on large screens, it's a different case.

This can be solved with anonymous table objects and table-header/footer/row-group.

With table-header/footer/row-group, you can reorganize your rows so you can put the "aside" at the end to transform it in an independent cell on large screens and place it in the middle with table-row-group on small screens:

.header{  background-color:green;  display:table-header-group;}.footer{  background-color:green;  display:table-footer-group;}.aside{  background-color:red;  display:table-row-group;}

<div class="header">stuff</div><div class="footer">stuff</div><div class="aside">Middle content</div>

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

---

Related Topics