CSS center element within a div element

Question

To center an HTML element I can use the CSS left  50    However  this centers the element with respect to the whole window   I have an element which is a child of a  lt div gt  element and I want to center the child with respect to this parent  lt div gt   not the whole window   I do not want the container  lt div gt  to have all its content centered  just the one specific child

User · Answer

I believe the modern way to go is place-items  center in the parent container An example can be found here  https   1linelayouts glitch me

User · Answer

Actually this is very straightforward with CSS3 flex boxes   x000D   x000D   flex-container    display  -webkit-box      OLD - iOS 6-  Safari 3 1-6  BB7      display  -ms-flexbox      TWEENER - IE 10      display  -webkit-flex     NEW - Safari 6 1   iOS 7 1   BB10      display  flex             NEW  Spec - Firefox  Chrome  Opera         justify-content  center    align-items  center       width  400px    height  200px    background-color   3498db      inner-element    width  100px    height  100px    background-color   f1c40f    x000D   lt div class  flex-container  gt     lt div class  inner-element  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   UPDATE  It seems that I didn t read the OP edit at the time I wrote this answer  The above code will center all inner elements  without overlapping between them   but the OP wants just an specific element to be centered  not the other inner elements  So  Warface answer second method is more appropiate  but it still requires vertical centering   x000D   x000D   flex-container    position  relative          Other styling stuff      width  400px    height  200px    background-color   3498db      inner-element    position  absolute    left  50     top  50        transform  translate -50  -50         or 3d alternative if you will add animations  smoother transitions       transform  translate3d -50  -50  0         Other styling stuff      width  100px    height  100px    background-color   f1c40f    x000D   lt div class  flex-container  gt     lt p gt Other inner elements like this follows the normal flow  lt  p gt     lt div class  inner-element  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

First of all you can do it with left 50  to center it relative to parent div but for that you need to learn CSS positioning   One possible solution from many is to do something like      div parent   text-align center         will center align every thing in this div as well as in the children element     div parent div   text-align left       to restore so every thing would start from left   if your your div to be centered is positioned relatively  you can just do       mydiv   position relative  margin 0 auto

User · Answer

Set text-align center  to the parent div  and margin auto  to the child div    x000D   x000D   parent   x000D      text-align center  x000D      background-color blue  x000D      height 400px  x000D      width 600px  x000D    x000D   block   x000D      height 100px  x000D      width 200px  x000D      text-align left  x000D    x000D   center   x000D      margin auto  x000D      background-color green  x000D    x000D   left   x000D      margin auto auto auto 0  x000D      background-color red  x000D    x000D   right   x000D      margin auto 0 auto auto  x000D      background-color yellow  x000D    x000D   lt div id  parent  gt  x000D       lt div id  child1  class  block center  gt  x000D          a block to align center and with text aligned left x000D       lt  div gt  x000D       lt div id  child2  class  block left  gt  x000D          a block to align left and with text aligned left x000D       lt  div gt  x000D       lt div id  child3  class  block right  gt  x000D          a block to align right and with text aligned left x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This a good resource to center mostly anything  http   howtocenterincss com

User · Answer

If you want to center elements inside a div and don t care about division size you could use Flex power  I prefer using flex and don t use exact size for elements     lt div class  outer flex  gt       lt div class  inner  gt          This is the inner Content      lt  div gt   lt  div gt    As you can see Outer div is Flex container and Inner must be Flex item that specified with flex  1 1 auto  for better understand you could see this simple sample  http   jsfiddle net QMaster hC223   Hope this help

User · Answer

left  50  works resectively to the nearest parent with static width assigned  Try width  500px or something on parent div  Alternatively  make the content you need to center display block and set left and right margins to auto

User · Answer

CSS      body      text-align center             divWrapper      width 960px   Change it the to width of the parent you want     margin  0 auto      text-align left          HTML   lt div class  divWrapper  gt Tada   lt  div gt    This should center the div  2016 - HTML5   CSS3 method  CSS  div relative    position relative     div thisDiv    position absolute    left 50     transform  translateX -50      -webkit-transform  translateX -50        HTML   lt div id  relative  gt     lt div id  thisDiv  gt Bla bla bla lt  div gt   lt  div gt    Fiddledlidle  https   jsfiddle net 1z7m83dx

User · Answer

If you want to use CSS3   position absolute  left calc 50  - PutTheSizeOfTheHalfOfYourElementpx     You might want to do further searches to figure out how to get the percentage to fit your element s width

User · Answer

Is the div a fixed width or a fluid width  Either way  for fluid width you could use    element      this is the child div    margin-left auto  margin-right auto     Add remaining styling here        Or you could set the parent div to text-align center  and the child div to text-align left    And left 50   only centers it according to the whole page when the div is set to position absolute   If yous set the div to left 50   it should do it relative to the parent div s width  For fixed width  do this    parent   width 500px      child   left 50   margin-left -100px  width 200px

User · Answer

If the child element is inline  e g not a div  table etc  I would wrap it up inside a div or a p and make the wrapper s text align css property equal to center        lt div id  container  gt          This text is aligned to the left  lt br gt          So is this text  lt br gt           lt div style  text-align  center  gt              This  lt button gt button lt  button gt  is centered           lt  div gt          This text is still aligned left       lt  div gt    Otherwise  if the element is a block  display  block  e g a div or a p  with a fixed width  I d set its margin left and right css properties to auto        lt div id  container  gt          This text is aligned to the left  lt br gt          So is this text  lt br gt           lt div style  margin  0 auto  width  200px  background  red  color  white   gt              My parent is centered           lt  div gt          This text is still aligned left       lt  div gt    You could of course add a text-align  center to the wrapper element to make its contents centered as well   I won t bother with positioning because IMHO its not the way to go for the OPs problem but be sure to check this link out  very helpful

User · Answer

mine would like magic    html  body    height  100       flex-container    display  -ms-flexbox    display  -webkit-box    display  flex    -ms-flex-align  center    -ms-flex-pack  center    -webkit-box-align  center    align-items  center    -webkit-box-pack  center    justify-content  center       lt div class  flex-container  gt     lt div gt Content lt  div gt   lt  div gt

User · Answer

Assign text-align  center  to the parent and display  inline-block  to the div

User · Answer

To center only the specific child     x000D   x000D   parent   x000D    height  100px  x000D    background-color  gray  x000D    position  relative  x000D    x000D   x000D   child   x000D    background-color  white  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    width  20px  x000D    height 20px  x000D    margin  auto  x000D   x000D    x000D   lt div class  parent  gt  x000D      lt span class  child  gt hi lt  span gt  x000D   lt  div gt    x000D   x000D   x000D    OR  you can use flex too  but that would center all children   x000D   x000D   parent   x000D    height  100px  x000D    background-color  gray  x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    x000D   x000D   child   x000D    background-color  white    x000D    x000D   lt div class  parent  gt  x000D      lt span class  child  gt hi lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

for example  i have an article div which is inside a main content div   Inside the article theres an image and under that image is a button  style like this    article    width  whatever  text-align  center   float  whatever  in case you got more articles in a row    margin  give it whatever margin you want       article          inside the article i want the image centered      article img    float  none  margin  0 auto  padding  give it a padded ridge if you want          Now under this image in the same article element there should be a button like read more  Of course you need to work with em or   when its inside a responsive design     button    background   whatever color  padding  4 3567     Instead of fixed width   text-align  cente  font  whatever  max-width  41 4166   float  none  margin  0 auto     You could make the zero into any margin you want on the top and bottom of this button   Just notice the float  none property   this wil solve most your issues  also check if maybe position and displaay might mess up your code          Good luck

User · Answer

Create a new div element for your element to center  then add a class specifically for centering that element like this   lt div id  myNewElement  gt       lt div class  centered  gt           lt input type  button  value  My Centered Button   gt       lt  div gt   lt  div gt    Css   centered      text-align center

User · Answer

lt html gt   lt head gt   lt  head gt   lt style gt     out      width 200px      height 200px      background-color yellow          in      width 100px      height 100px      background-color green      margin-top 50       margin-left 50       transform translate -50  50         lt  style gt     lt body gt        lt div class  out  gt        lt div class  in  gt         lt  div gt        lt  div gt      lt  body gt   lt  html gt

User · Answer

You can use bootstrap flex class name like that    lt div class  d-flex justify-content-center  gt         the elements you want to center  lt  div gt    That will work even with number of elements inside

User · Answer

just give the parent div position  relative

User · Answer

I have found another solution    lt style type  text css  gt       container           width 600px    set how much you want         overflow  hidden           position  relative               containerSecond          position  absolute           top 0px           left -500            width 1100                content          width  800px    your content size          margin 0 auto                     lt  style gt    and in body    lt div class  container  gt      lt div class  containerSecond  gt          lt div class  content  gt  lt  div gt      lt  div gt   lt  div gt    This will center your content div whenever your container is bigger or smaller  In this case your content should be bigger than 1100  of container to not be centered  but in that case you can make with of containerSecond bigger  and it will work

User · Answer

text-align center  on the parent div Should do the trick

[css] CSS: center element within a <div> element

Examples related to css