How do I vertically center an H1 in a div

Question

First of all  my apologies  I know there are various solutions posted for this issue here  but for the life of me I can t get any of them to work    For a responsive website I m trying to center an h1 in a div    Centering horizontally is not an issue  but I m having problems getting it centered vertically  Presumably I m doing something wrong or misunderstanding the explanations I found here  or maybe both    So as I m probably interpreting earlier solutions given the wrong way  could someone please explain what exactly I have to add to the code beneath to get the h1 to center vertically     To make this question relevant to as much people as possible  I ve already stripped the code of all my previous attempts to do so myself     CSS    html  body   height  100   margin  0      section1   min-height  90    text-align center     HTML      lt div class  section  id  section1  gt   lt h1 gt Lorem ipsum lt  h1 gt   lt  div gt

User · Answer

Just use padding top and bottom  it will automatically center the content vertically

User · Answer

I ve had success putting text within span  tags and then setting vertical-align  middle on that span  Don t know how cross-browser compliant this is though  I ve only tested it in webkit browsers

User · Answer

HTML   lt div id  sample  gt   lt span class  vertical  gt Test Message lt  span gt   lt  div gt    CSS       sample                height 100px           width 100           background-color  003366          display table          text-align  center              vertical                   color white           display table-cell          vertical-align middle      Fiddle   Demo

User · Answer

You can achieve this with the display property   html  body       height 100       margin 0      padding 0     section1       width 100     full width       min-height 90       text-align center      display table    acts like a table     h1      margin 0      padding 0      vertical-align middle    middle centred       display table-cell    acts like a table cell       Demo  http   jsfiddle net a3Kns

User · Answer

you can achieve vertical aligning with display table-cell    section1       height  90        text-align center       display table      width 100       section1 h1  display table-cell  vertical-align middle    Example  Update - CSS3  For an alternate way to vertical align  you can use the following css 3 which should be supported in all the latest browsers    section1       height  90        width 100       display flex      align-items  center      justify-content  center      Updated fiddle

User · Answer

This is the jQuery method   Looks like overkill but it calculates the offset    lt html gt   lt head gt   lt title gt  lt  title gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt       lt script type  text javascript  src  https   raw github com dreamerslab jquery center master jquery center js  gt  lt  script gt       lt script type  text javascript  gt            function                     jquery-center   center                      lt  script gt    lt  head gt   lt body gt       lt div id  jquery-center  style  position absolute   gt          lt h1 gt foo lt  h1 gt       lt  div gt   lt  body gt   lt  html gt

[html] How do I vertically center an H1 in a div?

Examples related to html

Examples related to css

Examples related to responsive-design