1

I need to vertically center content within HTML container that has next properties:

height: auto;
min-height: 50%;

I tried different alignment techniques without success. For example:

Could you advice how to vertically center content in a such container? I'm interested in pure HTML/CSS solution.

Vitaliy Shibaev
  • 1,420
  • 10
  • 24
  • 1
    Solution is here for your question: http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css – Pradip R. Aug 25 '14 at 06:41
  • 1
    What solution do you exactly mean? Please pay attention on the specific of my question - container has "auto" height as well as defined min-height. – Vitaliy Shibaev Aug 25 '14 at 07:31

3 Answers3

1

First I am going with the table structure. Update your CSS like below.

 .main-container {
border: 1px solid;
height: auto;
min-height: 50%; /* important */
display:table;
width:100%;
}

.child-container {
display: inline-table;
height: 100%;
width: 100%;
}

.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}

DEMO

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • Unfortunately, this solution does not work in Firefox - min-height is ignored. It relates to this issue: bugzilla.mozilla.org/show_bug.cgi?id=307866. – Vitaliy Shibaev Aug 25 '14 at 07:31
1

I have updated the css:

html, body {
    height: 100%;
}

.main-container {
    display:table;
    border: 1px solid;
    height: auto;
    min-height: 50%; /* important */
    width:100%;
}

.child-container {
    display: table-row;
    height: 100%;
    width: 100%;
}

.content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Please see the updated JSFIDDLE

mizanurahma
  • 139
  • 5
0

Fiddle Link : http://jsfiddle.net/theharsh/k7uwnnfb/

You should try the CSS3 technique if IE8 or below is not the issue there. Element can be set vertically centered without the concern of Height.

HTML :

<div class="box">
    <div class="vcenter">
        Yo! This is Centered !
    </div>
</div>

CSS :

.box{
   height:200px;
   background:tomato;
   color:#fff;
   width:200px;
}
.vcenter{
    position: relative;
    top:50%;
    background:purple;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
theHarsh
  • 660
  • 5
  • 8