How to vertically center div inside the parent element with CSS

Question

I m trying to make a small username and password input box   I would like to ask  how do you vertically align a div   What I have is    lt div id  Login  class  BlackStrip floatright  gt      lt div id  Username  class  floatleft  gt Username lt br gt Password lt  div gt      lt div id  Form  class  floatleft  gt      lt form action    method  post  gt         lt input type  text  border  0  gt  lt br gt         lt input type  password  border  0  gt      lt  form gt      lt  div gt   lt  div gt    How can I make the div with id Username and Form to vertically align itself to the center  I ve tried to put   vertical-align  middle    in CSS for the div with id Login  but it doesn t seem to work  Any help would be appreciated

User · Answer

This can be done with 3 lines of CSS and is compatible back to (and including) IE9:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Example: http://jsfiddle.net/cas07zq8/

credit

User · Answer

G  borNagy s comment on another post was the simplest solution I could find and worked like a charm for me  since he brought a jsfiddle I m copying it here with a small addition   CSS    wrapper       display  table      height  150px      width  800px      border  1px solid red      cell       display  table-cell      vertical-align  middle      HTML    lt div id  wrapper  gt       lt div id  cell  gt           lt div class  content  gt              Content goes here          lt  div gt       lt  div gt   lt  div gt    If you wish to also align it horizontally you d have to add another div  inner-cell  inside the  cell  div  and give it this style    inner-cell        width  250px        display  block        margin  0 auto

User · Answer

I found this site useful  http   www vanseodesign com css vertical-centering  This worked for me   HTML   lt div id  parent  gt       lt div id  child  gt Content here lt  div gt   lt  div gt    CSS   parent       padding  5  0      child       padding  10  0

User · Answer

If you know the height  you can use absolute positioning with a negative margin-top like so    Login       width 400px      height 400px      position absolute      top 50       left 50       margin-left -200px     width   -2        margin-top -200px     height   -2        Otherwise  there s no real way to vertically center a div with just CSS

User · Answer

if you are using fix height div than you can use padding-top according your design need  or you can use top 50   if we are using div than vertical align does not work so we use padding top or position according need

User · Answer

I needed to specify min-height   login     display  flex     align-items  center     justify-content  center     min-height  16em

User · Answer

I m pretty late to the party  but I came up with this myself and it s one of my favorite quick hacks for vertical alignment  It s crazy simple  and easy to understand what s going on   You use the  before css attribute to insert a div into the beginning of the parent div  give it display inline-block and vertical-align middle and then give those same properties to the child div  Since vertical-align is for alignment along a line  those inline divs will be considered a line   Make the  before div height 100   and the child div will automatically follow and align in the middle of a very tall  line     parent before   child       display inline-block      vertical-align middle     parent before       content        so that it shows up     height 100      so it takes up the full height     Here s a fiddle to demonstrate what I m talking about  The child div can be any height  and you never have to modify its margins paddings  And here s a more explanatory fiddle   If you re not fond of  before  you can always manually put in a div    lt div class  parent  gt       lt div class  before  gt  lt  div gt       lt div class  child  gt          content      lt  div gt   lt  div gt    And then just reassign  parent before to  parent  before

User · Answer

I found a way that works great for me  The next script inserts an invisible image  same as bgcolor or a transparant gif  with height equal to half the size of the white-space on the screen  The effect is a perfect vertical-alignment    Say you have a header div  height 100  and a footer div  height 50  and the content in the main div that you would like to align has a height of 300       lt script type  text javascript  charset  utf-8  gt  var screen   window innerHeight  var content   150   300  var imgheight     screen - content    2   document write   lt img src  empty jpg  height      imgheight      gt       lt  script gt       You place the script just before the content that you want to align   In my case the content I liked to align was an image  width 95   with an aspect ratio of 100 85  width height  Meaning the height of the image is 85  of it s width  And the Width being 95  of the screenwidth   I therefore used   var content   150     0 85     0 95   window innerWidth       Combine this script with   lt body onResize  window location href   window location href   gt    and you have a smooth vertical alignment   Hope this works for you too

User · Answer

You can vertically align a div in another div  See this example on JSFiddle or consider the example below   HTML   lt div class  outerDiv  gt       lt div class  innerDiv  gt  My Vertical Div  lt  div gt   lt  div gt    CSS   outerDiv       display  inline-flex       lt -- This is responsible for vertical alignment     height  400px      background-color  red      color  white      innerDiv       margin  auto 5px        lt -- This is responsible for vertical alignment     background-color  green         The  innerDiv s margin must be in this format  margin  auto  px     Where    is your desired value    display  inline-flex is supported in the latest  updated current version  browsers with HTML5 support    It may not work in Internet Explorer  P     Always try to define a height for any vertically aligned div  i e  innerDiv  to counter compatibility issues

User · Answer

The best approach in modern browsers is to use flexbox    Login       display  flex      align-items  center      Some browsers will need vendor prefixes   For older browsers without flexbox support  e g  IE 9 and lower   you ll need to implement a fallback solution using one of the older methods   Recommended Reading   Browser support A Guide to Flexbox Using CSS Flexible Boxes

User · Answer

simplest way to center your div element is to use this class with following properties    light       margin  auto      width  50       border  3px solid green      padding  10px

User · Answer

have you try this one    parentdiv    margin  auto   position  absolute   top  0  left  0  bottom  0  right  0   height  300px     at least you have to specify height     hope this helps

User · Answer

Vertically aligning  has always been tricky   Here I have covered up some method of vertically aligning a div   http   jsfiddle net 3puHE   HTML    lt div style  display flex   gt    lt div class  container table  gt   lt div class  tableCell  gt   lt div class  content  gt  lt em gt Table lt  em gt  method lt  div gt   lt  div gt   lt  div gt    lt div class  container flex  gt   lt div class  content new  gt  lt em gt Flex lt  em gt  method lt br gt  lt  div gt   lt  div gt    lt div class  container relative  gt   lt div class  content  gt  lt em gt Position lt  em gt  method lt  div gt   lt  div gt    lt div class  container margin  gt   lt div class  content  gt  lt em gt Margin lt  em gt  method lt  div gt   lt  div gt    lt  div gt    CSS   em font-style  normal font-weight  bold    container       width 200px height 200px background  ccc      margin  5px  text-align  center     content      width 100px  height  100px background  37a margin auto color   fff     table display  table    table  gt  div display  table-cell height  100  width  100  vertical-align  middle    flex display  flex    relative position  relative    relative  gt  div  position  absolute top  0 left  0 right  0 bottom  0    margin  gt  div  position relative  margin-top  50  top  -50px

User · Answer

Centering the child elements in a div  It works for all screen sizes   parent       padding  5  0      child       padding  10  0      lt div id  parent  gt       lt div id  child  gt Content here lt  div gt   lt  div gt    for more details  you can visit to this link

User · Answer

http   jsfiddle net dvL512e7   Unless the aligned div has fixed height  try using the following CSS to the aligned div       margin  auto    position  absolute    top  0    left  0    bottom  0    right  0    display  table

User · Answer

In my firefox and chrome work this    CSS    display  flex  justify-content  center         vertical align align-items  center             horizontal align

User · Answer

divs can t be vertically aligned that way  you can however use margins or position relative to modify its location

[css] How to vertically center <div> inside the parent element with CSS?

Examples related to css

Examples related to alignment

Examples related to centering