Vijay Kumar B Vijay Kumar B - 1 month ago 5
HTML Question

How to move element center from both horizontal and vertival using tranform:translate

Iam trying to move my division center from both horizontal and vertical but it is b\not working.Here is my code

<body>
<div class="main"></div>
</body>


and css code

.main{
width: 100px;
height: 100px;
background-color: red;
transform: translate(50% ,50%);


}

Answer

I believe to accomplish that trick you'll need absolute positioning and a top/left value of 50%.

.main{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%; 
}
<body>
    <div class="main"></div>
</body>

Comments