How to Center Variable Width Divs in CSS

Easy way to center variable width divs in CSS

That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>

Center fixed div with dynamic width (CSS)

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

See this example working on this fiddle.

align a variable width div in the center

One option is to emulate a table with the <div>'s surroundings.

<div class='outer'>
    <div class='inner'>
        <div class='thebox'>Contents</div>
    </div>
</div>

And then use the CSS:

div.outer {
    display:table;
    width:100%; //Or however wide you want the container to be
}
div.inner {
    display:table-cell; //This allows the use of vertical-align
    vertical-align:middle;
    text-align:center;
    width:100%;
}
div.thebox { //Your variable-width container
    display:inline-block; //Makes it obey text-aligning.
}

You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.

Center div with variable width, on top of other content

You could create a wrapper:

#mydiv-wrapper {
    width: 75%;
    position: fixed;
    left: 50%;
    top: 50px;
    margin: 0 0 0 -37.5%;
    z-index: 10000;
    text-align: center;
}

this way you can insert inside it another div, without setting its width. The width will be automatically calculated.

#mydiv {
    display: table;
    margin: auto;
}

This won't push other elements down (thanks to position: absolute), and will appear on top of the other element (like an alert, just to be clear). Just change the top attribute to set the desired vertical position.

Test JSFiddle

Center-align a variable-width div in 100% screen

Yes you can do it with display:inline-block.

For example:

css:

 #wrapper{
    width:100%;
    text-align:center;
}
#center{
    display:inline-block;
    *display:inline;/* IE*/
    *zoom:1;/* IE*/
    background:yellow;
    overflow:hidden;
    text-align:left;
}
.cell{
    float:left;
    width:50px;
    height:50px;
    background:red;
    margin:5px;
}

Check this example http://jsfiddle.net/8a4NK/

Centering variable number of divs in container

Add

.container {
    text-align: center;
}

and remove float: left; everywhere. Instead make div-s behave like inline elements with display: inline-block; for .expertise_div - they will always be centered being inline elements of .container. Also you have to refine your styles concerning the elements' margins for every viewport size taking into account the variable number of elements. The Flex Box Layout might be an alternative if don't want to worry about all these margins and cases.

@charset "utf-8";

.container {

   text-align: center;

}

.expertise_section {

    padding: 85px 0;

}

.expertise_section h2 {

    font-weight:500;

    margin-top:7px;

}

.expertise_div {  

    display: inline-block;

    width: 24.2%;

    margin-right:1.05%;

}

.expertise_div:nth-child(4n+4) {

    margin-right:0px;

}

.expertise_div p {

    font-family: 'Open Sans', sans-serif;

    color: #6c6c6c;

    font-weight: 300;

}

.expertise_content {

    border-bottom: 2px solid #45acba;

    border-top: 2px solid #45acba;

    margin: 18px 0;

    padding: 26px 0;

}

.expertise_content p:last-child {

    margin-bottom:2px;

}

.expertise_div a {

  color: #3a9cab;

  font-size: 14px;

  font-weight: 500;

}

.expertise_section_inner {

    margin-top:36px;

}

.green_div .expertise_content {

    border-color:#8ebb29;

}

.green_div a {

    color:#8ebb29;

}

.maroon_div .expertise_content {

    border-color:#81515d;

}

.maroon_div a {

    color:#81515d;

}

.orange_div .expertise_content {

    border-color:#d86435;

}

.orange_div a {

    color:#d86435;

}

.show_1023 {

    display:none;

}

@media only screen and (max-width: 1199px) {

    .container {

        padding:0px 35px !important;

    }

}

@media only screen and (max-width: 1023px) {

    .expertise_div {

        margin-right: 3.2%;

        width: 48%;

        margin-bottom:53px;

    }

    .expertise_div:nth-child(2n+2) {

        margin-right: 0;

    }

    .expertise_section {

        padding: 85px 0 30px;

    }

    .expertise_section_inner {

        padding: 0 101px;

    }

    header {

        padding: 20px 15px;

    }

}

@media only screen and (max-width: 951px) {

  .container {

        padding: 0 30px !important;

    text-align: center;

    }

}

@media only screen and (max-width: 767px) {

    .container {

        padding: 0 30px !important;

    text-align: center;

    }

    .expertise_section {

        padding: 78px 0 45px;

    }

    .expertise_div {

        width:100%;

        margin-right:0px;

        margin-bottom:31px;

    }

    .expertise_section_inner {

        padding: 0;

        margin-top:33px;

    }

    .hide_767 {

        display:none;

    }

    .show_767 {

        display:block;

    }

}

@media only screen and (max-width: 479px) {

    .container {

        padding: 0 30px !important;

    text-align: center;

    }

    .hide_480 {

        display:none !important;

    }

    .show_479 {

        display:block !important;

    }

}

<div class="expertise_section text-center">

<div class="row">

<div class="container">

<h2>Centered Headline</h2>

<div class="expertise_section_inner row">

</div>

<!-- ***** if the below is removed, the remaining 3 divs do not center correctly -->

<div class="expertise_div blue_div" >

<div class="expertise_content">

<p>Paragraph 1...</p>

</div>

<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div green_div" >

<div class="expertise_content">

<p>Paragraph 2...</p>

</div>

<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

<div class="expertise_div maroon_div">

<div class="expertise_content">

<p>Paragraph 3...</p>

</div>

<a href="https://www.jsfiddle.net" target="_blank">READ MORE</a></div>

</div>

</div>

</div>

Centering a div horizontally with variable width not working in IE

Made some research and found a suitable solution using relative positions. This seem to work perfectly in commonly used browsers.

The style would be following:

div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
    background-color: gray;
    float: left;
    position: relative;
    right: 50%;
}

Center a div, as width as its content

display: table; margin: 0 auto;

http://jsfiddle.net/vabxz/

---

Related Topics