Center a H1 tag inside a DIV

Question

I have the following DIV inside a body tag    lt div id  AlertDiv  gt  lt h1 gt Yes lt  h1 gt  lt  div gt    And these are their CSS classes    AlertDiv       position absolute      height  51px      left  365px      top  198px      width  62px      background-color black      color white      AlertDiv h1      margin auto      vertical-align middle      How can I align vertically and horizontally H1 inside DIV   AlertDiv will be bigger than H1

User · Answer

lt div id  AlertDiv  style  width 600px height 400px border SOLID 1px   gt       lt h1 style  width 100  height 10  text-align center position relative top 40    gt Yes lt  h1 gt   lt  div gt    You can try the code here   http   htmledit squarefree com

User · Answer

You can add line-height 51px to  AlertDiv h1 if you know it s only ever going to be one line  Also add text-align center to  AlertDiv    AlertDiv       top 198px      left 365px      width 62px      height 51px      color white      position absolute      text-align center      background-color black      AlertDiv h1       margin auto      line-height 51px      vertical-align middle      The demo below also uses negative margins to keep the  AlertDiv centered on both axis  even when the window is resized   Demo  jsfiddle net KaXY5

User · Answer

On the hX tag  width  100px  margin-left  auto  margin-right  auto

User · Answer

You can use display  table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell    AlertDiv       display  table-cell      vertical-align  middle      text-align  center      You can try it here  http   jsfiddle net KaXY5 424

User · Answer

Started a jsFiddle here     It seems the horizontal alignment works with a text-align   center   Still trying to get the vertical align to work  might have to use absolute positioning and something like top  50  or a pre-calculated padding from the top

User · Answer

You could add padding to the h1    AlertDiv h1     padding 15px 18px

User · Answer

There is a new way using transforms  Apply this to the element to centre  It nudges down by half the container height and then  corrects  by half the element height   position  relative  top  50   transform  translateY -50    -webkit-transform  translateY -50    -ms-transform  translateY -50      It works most of the time  I did have a problem where a div was in a div in a li  The list item had a height set and the outer divs made up 3 columns  Foundation   The 2nd and 3rd column divs contained images  and they centered just fine with this technique  however the heading in the first column needed a wrapping div with an explicit height set   Now  does anyone know if the CSS people are working on a way to align stuff  like  easily  Seeing that its 2014 and even some of my friends are regularly using the internet  I wondered if anyone had considered that centering would be a useful styling feature yet  Just us then

[css] Center a H1 tag inside a DIV

Examples related to css

Examples related to vertical-alignment

Examples related to alignment