CSS

how to center a inline block element

  display: inline-block;
  position: relative;
  /* Move the element to the right by 50% of the container's width */
  left: 50%; 
  /* Calculates 50% of the element's width, and moves it by that */ 
  /* amount across the X-axis to the left */
  transform: translateX(-50%);

how to center div in block container

display: inline-block;
  position: relative;
  /* Move the element to the right by 50% of the container's width */
  left: 50%; 
  /* Calculates 50% of the element's width, and moves it by that */ 
  /* amount across the X-axis to the left */
  transform: translateX(-50%);

Center a Block element

//if i want to center a block element
then there a multipleways

<div class="parent">
  <div class="child" > </div>
</div>

1) first make the parent postion:realative;
2)child postion absolute so that you can use top,left,right,bottom props
3) set left:0 and right:0 and margin:auto and you child element will be center
4)margin:auto center a child element horizontally and leave equal space to 
its left and right so if you set left and right to  0 in child element
it means the child is to be set where the left is 0 since the position is
already absoulte than your element will then the left prop will be consider
from where the margin auto prop end thats the space left after horizantal center

second way
 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

1) the postion absolute force the element to consider the top and left props
directly from its parent that means the props will start
at the end of top 50% and left 50% and to balance it out we use
-50% to the y -axis and same to the x- axis this will center the
element