[CSS] Center a div

03/03/2022

Làm web thì hẳn ai cũng sẽ phải center element sử dụng CSS, còn nhớ năm nào mình đi phỏng vấn VNG và được hỏi có bao nhiêu cách để center 1 cái div trong 1 cái div. Mình ngồi cười và sau đó đứng dậy đi về.

Giỡn chút vậy, mình sẽ thử liệt kê những cách mà mình biết.

Giả sử chúng ta chúng ta có HTML như này:

<div class="container">
  <div class="element">Element</div>
</div>

Với ràng buộc rất đơn giản, container và element có những CSS cơ bản phía dưới. Hãy center element trong container, có thể chỉnh sửa HTML và CSS tùy ý, miễn sao ra kết quả.

.container {
  padding: 16px;
  width: 100%;
  height: 200px;
  background: blue;
}
.element {
  padding: 16px;
  background: green;
}

Output mong đợi sẽ như thế này:

Element

Cách 1: Sử dụng flex

Cách quá rõ ràng cho một CSS engineer.

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

Test:

Element

Cách 2: Sử dụng flex nhưng mà nó lạ lắm

Cách có thể sử dụng trong một số trường hợp mà cách trên gây bug, hy vọng một ngày bạn sẽ gặp cho biết.

.container {
  display: flex;
}
.element {
  margin: auto;
}

Test:

Element

Cách 3: Sử dụng grid với *-content

.container {
  display: grid;
  justify-content: center;
  align-content: center;
  /* tương đương place-content: center; */
}

Test:

Element

Cách 4: Sử dụng grid với *-items

.container {
  display: grid;
  justify-items: center;
  align-items: center;
  /* tương đương place-items: center; */
}

Test:

Element

Cách 5: Sử dụng grid như flex

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

Test:

Element

Cách 6: Sử dụng grid như flex nhưng ngược lại

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

Test:

Element

Cách 7: Sử dụng position

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Test:

Element

Cách 8: Sử dụng display inline-block

Cách này yêu cầu phải sửa HTML một chút.

<div class="container">
  <div class="element">Element</div>
  <div class="sibling"></div>
</div>

.container {
  text-align: center;
}

.container > div {
  vertical-align: middle;
  display: inline-block;
}
.sibling {
  width: 0;
  height: 100%;
}

Test:

Element

Cách 9: Sử dụng display table, inline-block

<div class="container-wrapper">
  <div class="container">
    <div class="element">Element</div>
  </div>
</div>

.container-wrapper {
  display: table;
  width: 100%;
}

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

.element {
  display: inline-block;
}

Test:

Element

Cách 10: Sử dụng grid template

.container {
  display: grid;
  grid-template-areas:
    ". . ."
    ". element ."
    ". . .";
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
}

.element {
  grid-area: element;
}

Element

Lời kết

Tùy trường hợp mà ta lại sử dụng những cách khác nhau cho mục đích center element: nội dung động, nhiều phần tử,…

Bạn còn cách nào khác? Chia sẻ cho mình biết bên dưới :D.

Đối với grid justify/align-items/content, bạn có thể đọc lại bài này để hiểu sự khác biệt: http://blog.lehuuvietanh.com/content-vs-items-css/