Center Div in Parent with Only Min-Height, and Child May Without Height & with Relative Position

Center div in parent with only min-height, and child may without height & with relative position

Use the display: table; and display: table-cell; properties.

The outer DIV will need to have display: table; and the inner DIV display: table-cell; along with vertical-align: middle;. Now you will be mimicing the default display of a td.

CSS

.parent {
  min-height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; 
}

HTML

<div class="parent">
     <div class="child">child</div>
</div>

This question has been asked often. A simple search here on SO or Google will get you plenting of results.

• How to vertically center divs?
• Align vertically using CSS 3

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

• add position:relative to #containment
• add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

Center parent div vertically based on child element

Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;

.content {
  width: 80%;
  margin: 0px auto;
}

#container .col {
  border: 1px solid #00acd4;
  background-color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
}

#parent {
  background-color: #f0f9fb;
  max-height: 80px;
  display: flex;
  align-items: center;
}

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="container">
  <div id="parent">
    <div class="content">
      <div class="row">
        <div class="col ">

          <h3>$500</h3>
        </div>
        <div class="offset-1 col">

          <h3>$3500</h3>
        </div>
        <div class="col offset-1">

          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

Vertically centred div which increases parent height

Why positions?!

You can center div With this:

I use this for center a div with dynamic height in it's parent:

<style>
    .body {
        height: 300px;
        background: red;
        display:table;
        width: 100%;
    }
    .parent {
        display:table-cell; 
        vertical-align: middle;
        background: rgb(105, 199, 115);

    }
    .child {

        background: green;
        width: 200px;
        margin: auto;
    }
</style>
<div class="body">
    <div class="parent">
        <div class="child">
            Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, 
        </div>
    </div>
</div>

parent div with absolutely positioned child divs refuses to be 100% height

From the MDN:

A percentage value for min-height property is calculated with
respect to the height of the generated box's containing block.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

Hence, you'll need to specify the height of the #content element explicitly to get min-height property of #dashboard element to work.

Thus, try using height property for #content instead of min-height:

#content {
  height: 100%;
}

Here is a jsDiddle Demo.

html, body {
    height: 100%;
}
#content {
  height: 100%;
}
#dashboard {
  min-height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}​

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>​

UPDATE

I don't want #content to be full-size at all times.

Then, you'll need to use a fixed height for the #content:

#content {
  height: 200px;  /* or whatever you want */
}

#dashboard {
  height: 100%;   /* or inherit */;
}

Else, you should use JavaScript to calculate the needed height and apply that to the #dashboard element.

Vertical alignment in div with unknown parent height

You don't need to use float property when you are using display:table and table-cell. So just remove them from your inline style and then everything will work as expected.

Js Fiddle Example

Text centered with min-height and resize height of container

You could use flexbox and center the contents with justify-content

div.row {  border: 1px dotted black;  min-height:65px;  display:flex;  flex-direction:column;  justify-content:center;}

<div class="row">  <div class="content">    This is a case where we have a small text;  </div></div><div class="row">  <div class="content">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis.   </div></div>

---

Related Topics