CODEWITHSUNDEEP
csshtmlcenter
Damien
Damien

Reputation: 333

Center vertically a unknown height text in a unknown height div

I know this is a common issue, and I've already asked a similar one. But I could not find the solution this time. I am trying to vertically center a text which can have different height in a DIV which can have different height. And I am trying to solve this only with CSS, without touching the HTML.

Example : http://jsfiddle.net/F8TtE/

 <div id="test">
    <div id="sumup">

        <h1 class="titre">Title</h1>
        <div id="date">hello guys</div>
    </div>
 </div>

My goal is to have the text centered vertically and horizontally whatever its size.

Upvotes: 10

Views: 13849

Answers (3)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

Here it is :

#test {
    text-align:center;
}
#test::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#sumup {
    display: inline-block;
    vertical-align: middle;
}


#test {
    height : 180px;
    text-align:center;
    background: yellow;
}

#sumup {
   	background-color: #123456;
}

#test:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #sumup {
    display: inline-block;
    vertical-align: middle;
  }
<div id="test">
		<div id="sumup">
			
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>

EDIT: It's now 2015 and thankfully the web changes. Assuming you don't support obsolete browsers, it's usually simpler and cleaner to vertically center elements with the Flex model.

#test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#test {
    height : 180px;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sumup {
   	background-color: #123456;
}
<div id="test">
		<div id="sumup">
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>

Upvotes: 19

DaniP
DaniP

Reputation: 38252

CSS with display solution: 

#test {
  display:table; 
}

#sumup {
  display:table-cell; 
}

The Demo http://jsfiddle.net/F8TtE/7/

Upvotes: 0

TreeTree
TreeTree

Reputation: 3230

Here's another way using display:table-cell since I don't quite understand how dystroy's answer works.

#test {
    width:100%;
    height : 400px;
    display:table;
}

#sumup {
    width : 100%;

    height : 100%;
    background-color: #123456;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/F8TtE/3/

Upvotes: 2

Related Questions