When absolutely positioned, the element is horizontally and vertically centered

Assume that the length and width of the elements are 100px, There are two ways to center it horizontally and vertically
1.

.item{
    
position:absolute;
left:50%;
top:50%;
margin-left:-50px;/*100px Half of */
margin-top:-50px;/*100px Half of */
}

2.

.item{
    
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}