Center Fixed Div with Dynamic Width (Css)

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.

CSS: How to position a div in the center with dynamic width

Solution:

Set .popup-content { width: 100%; } and nest your content inside another div display: table; margin: 0 auto;

JSFIDDLE DEMO

Explanation:

Your centered div .popup-content has the attribute left: 50%, which means it will leave the left half of its parent blank. This means, that the div sets its own width to all of the width of its parent that is left, which although will be 50%.

For example if you set .popup-contents width to left: 30%, it will use 70% of its parents width.

Your second css attribute transform: translate(-50%, -50%); only does move the whole div, without changing (or influencing) its width.

CSS derivation:

I guess you want the div to be only as big as needed and centered both, horizontal and vertical. If thats right, heres a step by step solution:

As your css does a good job of centering it vertical, you can keep this, but simply set its width to 100%:

.popup-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translate(0%, -50%);
}

Next you can nest your content inside another div to center it horizontal using display: table;

.popup-center-horizontal {
  display: table;
  margin: 0 auto;
  background: red;
}

You can check a working demo right here JSFIDDLE DEMO.

If you do not want your div to reach the side, you can set a max-width to limit its size, for example:

.popup-center-horizontal {
   max-width: 90%;
}

Works on IE8+.

CSS centering div with dynamic width

Use text-align: center and remove the position: absolute from child class.

Fiddle

.parent {
    width: 800px;
    height: 400px;
    display: block;
    background: blue;
    position: absolute;
    text-align: center;
}
.child {
    margin-left: auto;
    margin-right: auto; 
}

How do I horizontally center a fixed div while having the width fit the content inside

Remove margin-left in code.

Set transform and left for horizontally center.

Modify width to 100%.

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
}

Center a position:fixed element

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

HTML/CSS - dynamic width div next to bottom-right aligned fixed width div

You can use display:inline-block for div like:

*{    margin:0;    padding:0;}.main {    border-collapse: collapse;}
.left {    display:inline-block;    width: 80%;    background-color: blue;}
.right {        text-align: center;     vertical-align: bottom;     background-color: red;    display:inline-block;    width: 20%;}

<div class="main">      <div class="left">          <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>        </div><div class="right">          <span>Fixed text</span><br/><span>Fixed text</span>        </div></div>

CSS horizontal centering of a fixed div?

left: 50%;
margin-left: -400px; /* Half of the width */

Dynamic width of div elements inside a fixed width div

Basically you are asking for a table where the width of every cell should be the same in proportion of the fixed width of the parent.

It is possible in CSS if you know the maximum possible number of children (if not you will always use all the space but the width of each cell will change based on the content)

When you know the maximum number if children, you add that property to the class .height: max-width:Npx where N is the width of the parent divided by the number of children

.container {    border:1px solid #000;    border-radius:5px;    width:500px;    display:table;}.child{    display:table-cell;    border-right:1px solid #000;}
.child:last-of-type {    border:none;}.height{    min-height:100px;}

<div class="container height">    <div class="child height">Child 1</div>    <div class="child height">Child 2</div>    <div class="child height">Child 3</div>    <div class="child height">Child 4</div>    <div class="child height">Child 5</div></div>

Center Fixed Div with Dynamic Width (Css)