How to center horizontally div inside parent div

Question

How do I center a div horizontally inside its parent div with CSS    lt div id  parent  style  width  100    gt    lt div id  child  style  width  50px  height  100px   gt Text lt  div gt   lt  div gt

User · Answer

You can use the  auto  value for the left and right margins to let the browser distribute the available space equally at both sides of the inner div    lt div id  parent  style  width  100    gt      lt div id  child  style  width  50px  height  100px  margin-left  auto  margin-right  auto  gt Text lt  div gt   lt  div gt

User · Answer

lt div id  parent  style  width  100  text-align center   gt    lt div id  child  style  width 50px  height 100px margin 0px auto   gt Text lt  div gt   lt  div gt

User · Answer

Just out of interest  if you want to center two or more divs  so they re side by side in the center   then here s how to do it     lt div style  text-align center   gt       lt div style  border 1px solid  000  display inline-block   gt Div 1 lt  div gt       lt div style  border 1px solid red  display inline-block   gt Div 2 lt  div gt   lt  div gt

User · Answer

parent-container     display  flex    justify-content  center    align-items  center      child-canvas     flex-shrink  0

User · Answer

I am assuming the parent div has no width or a wide width  and the child div has a smaller width  The following will set the margin for the top and bottom to zero  and the sides to automatically fit  This centers the div   div child       margin  0 auto

User · Answer

lt div id  child  style  width  50px  height  100px  margin 0 auto   gt Text lt  div gt

[html] How to center horizontally div inside parent div

Examples related to html

Examples related to css