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%);
Source: stackoverflow.com
center block div
margin-left: auto; margin-right: auto;
Source: stackoverflow.com
how to center div
<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
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