CODEWITHSUNDEEP
htmlcssvertical-alignment
George Adrian Echim
George Adrian Echim

Reputation: 115

CSS: Vertical-align

How to vertical-align without using display table/table-cell or position absolute ?

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  border: 1px solid blue;
}
<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Upvotes: 3

Views: 438

Answers (7)

annasvst
annasvst

Reputation: 48

You can try using display:flex.
CSS

#parent {
  border: 1px solid red;
  height: 100vh;
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
}

.child {
  border: 1px solid blue;
}
<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Upvotes: 1

user4602228
user4602228

Reputation:

if you do not mind browser compatibility I would go with flex - see @rblarsen, @Satheesh Kumars answers.

but if you need to expand browser support, here is a more complex but rather solid solution : tested IE9+ FF Chrome and other major browsers...

check out this fiddle : https://jsfiddle.net/kLLz0nm2/

HTML

<div class="wrapper">
   <div class="content">Middle aligned</div>
   <div class="middle"></div>
</div>

CSS

.wrapper{
   width : 100%;
   height : 100%;
   text-align: center;
}

.content{
   display: inline-block;
   vertical-align: middle;
}

.middle{
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

P.S - the above translate solution while fairly simple can sometimes cause poor rendering issues, check out : the right version looking sharper

Upvotes: 0

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

Here is an another option using "Flex" property.

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

#parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  height: 100vh;
}

.child {
  border: 1px solid blue;
  flex-grow: 1;
}

Codepen demo link

Upvotes: 3

Diyavol Pasa
Diyavol Pasa

Reputation: 13

You can use like that I think

position: fixed; top: 50%;

Upvotes: 0

Ernesto Schiavo
Ernesto Schiavo

Reputation: 1060

Another method could be to use a floater div

#parent {
  border: 1px solid red;
  height: 100vh;
}
.floater {
    float:left;
    height:50%;
    width:100%;
    margin-bottom: -25px;
}
.child {
  border: 1px solid blue;
  clear: both;
  height:50px;
}
<div id="parent">
  <div class="floater"></div>
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Upvotes: 1

razemauze
razemauze

Reputation: 2676

You can use display:flex;:

#parent {
  border: 1px solid red;
  height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

Upvotes: 0

dvr
dvr

Reputation: 895

You can use position relative, with top of 50% and a translation of -50%.

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  position: relative;
  top: 50%;
  transform: translate(0,-50%);
  border: 1px solid blue;
}
<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Upvotes: 3

Related Questions