Căn giữa phần tử khi không biết chiều dài và chiều rộng bằng CSS

Căn giữa phần tử là một công việc khá quen thuộc và thường được sử dụng khá là nhiều, trong bài viết này, tớ sẽ hướng dẫn các ông căn giữa một phần tử bất kì khi không biết chiều dài và chiều rộng của phần tử hiển nhiên là biết cũng áp dụng được🤣.

Căn giữa phần tử khi không biết chiều dài và chiều rộng bằng CSS

Giả sử chúng ta có cấu trúc HTML như sau

<div class='parent-container'>
	<div class='child'>
    	{ mã code ở đây }
    </div>
</div>

Và để căn giữa phần tử child thì chúng ta sẽ có mã CSS như sau:

.parent-container {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hoặc có thể sử dụng flex với cấu trúc sau:

.parent-container {
     display: flex;
     justify-content: center;
     align-items: center;
}

Và đây là bản demo: