How to center a p element inside a div container

Question

I want my  lt p gt  element to be at the center of a container  lt div gt   as in perfectly centered -- the top  bottom  left and right margins split the spaces equally   How can I achieve that    x000D   x000D  div   x000D    width  300px  x000D    height  100px  x000D    x000D  p   x000D    position  absolute  x000D    top  auto  x000D    x000D   lt div gt  x000D     lt p gt I want this paragraph to be at the center  but it s not  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

You dont need absolute positioning Use  p    text-align  center  line-height  100px       And adjust at will     If text exceeds width and goes more than one line  In that case the adjust you can do is to include the display property in your rules as follows    I added a background for a better view of the example   div     width 300px    height 100px      display  table     background  ccddcc        p     text-align center     vertical-align  middle    display  table-cell         Play with it in this JBin

User · Answer

on the p element  add 3 styling rules    myCenteredPElement      margin-left   auto      margin-right  auto      text-align  center

User · Answer

This solution works fine for all major browsers  except IE  So keep that in mind   In this example  basicaly I use positioning  horizontal and vertical transform for the UI element to center it    x000D   x000D           container   x000D                 set the the position to relative    x000D              position  relative  x000D              width  30rem  x000D              height  20rem  x000D              background-color   2196F3  x000D            x000D   x000D   x000D           paragh   x000D                 set the the position to absolute    x000D              position  absolute  x000D                 set the the position of the helper container into the middle of its space    x000D              top  50   x000D              left  50   x000D              font-size  30px  x000D                 make sure padding and margin do not disturb the calculation of the center point    x000D              padding  0  x000D              margin  0  x000D                 using centers for the transform    x000D              transform-origin  center center  x000D                 calling calc   function for the calculation to move left and up the element from the center point    x000D              transform  translateX calc  100    2     -1    translateY calc  100    2     -1     x000D            x000D   lt div class  container  gt  x000D       lt p class  paragh  gt Text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    I hope this help

User · Answer

Centered and middled content    Do it this way     lt table style  width 100   gt       lt tr gt           lt td valign  middle  align  center  gt Table once ruled centering lt  td gt       lt  tr gt   lt  table gt    I fiddled it here  Ha  let me guess    you want DIVs     just make your first outter DIV behave like a table-cell then style it with vertical align middle    lt div gt       lt p gt I want this paragraph to be at the center  but I can t  lt  p gt   lt  div gt   div       width 500px      height 100px      background-color aqua      text-align center          there it is        display table-cell      vertical-align middle      jsfiddle net 9Mk64

User · Answer

you should do these steps      the mother Element should be positioned for EXP you can give it position relative   the child Element should have positioned  Absolute  and values should set like this  top 0 buttom 0 right 0 left 0   to be middle vertically  for the child Element you should set  margin   auto   to be middle vertically  the child and mother Element should have  height and width  value for mother Element    text-align center  to be middle horizontally      simply here is the summery of those 5 steps    mother Element       position   relative      height   20       width   5       text-align   center        child Element       height   1 2 em      width   5       margin   auto      position   absolute      top 0      bottom 0      left 0      right 0

User · Answer

To get left right centering  then applying text-align  center to the div and margin  auto to the p   For vertical positioning you should make sure you understand the different ways of doing so  this is a commonly asked problem  Vertical alignment of elements in a div

User · Answer

You only need to add text-align  center to your  lt div gt    In your case also remove both styles that you added to your  lt p gt                     Check out the demo here  http   jsfiddle net 76uGE 3   Good Luck

[html] How to center a <p> element inside a <div> container?

Examples related to html

Examples related to css

Examples related to text

Examples related to centering