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%);//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
elementdisplay: 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%);