Centering in CSS: A Complete Guide (P1+P2)

Khi làm việc với CSS các designer hay lập trình viên thường phàn nàn rằng "Sao việc center các element trong CSS lại khó khăn và loằng ngoằng vậy?" Tôi nghĩ rằng vấn đề khồng phải là do độ phức tạp mà do có rất nhiều cách để center một element, tùy từng trường hợp mà vận dụng chúng sao cho phù hợp. Vậy lựa chọn cách nào? Đó chính là điều khiến mọi người cảm thấy bối rối. Bài viết này sẽ liệt kê ra các tình huống thực tế, hy vọng nó sẽ giúp các bạn có cái nhìn tổng quan hơn và giúp bạn dễ dàng hơn khi lựa chọn một cách tiếp cận nào đó.

1. Horizontally: Center theo chiều ngang

• Các inline element (text, span, anchor ...)

Bạn có thể center các inline elements theo chiều ngang, nằm trong một block element cha, đơn giản bằng cách:

.center-children {
  text-align: center;
}

Demo: http://codepen.io/chriscoyier/pen/eszon

Thuộc tính text-align: center; sẽ center ngang các thẻ inline, inline-block, inline-table, inline-flex ...

• Các block element(div, h ...) Không thể dùng text-align center cho các block element được, trong trường hợp này chúng ta sẽ các thuộc tính margin-left và margin-rigt với giá trị là auto:

.center-me {
  margin: 0 auto;
}

Demo: http://codepen.io/chriscoyier/pen/eszon

Nếu muốn center nhiều block element trên một row, có thể set thuộc tính display: inline-block và text-align: center. Hoặc bạn có thể sử dụng flex-box:

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}

Demo: http://codepen.io/chriscoyier/pen/ebing

2. Vertically: Center theo chiều dọc

• Các inline element

• Trên một row: Đơn giản chỉ cần padding trên và dưới:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Demo: http://codepen.io/chriscoyier/pen/ldcwq

Vì một lý do nào đó bạn ko muốn chọn padding, khi đó set line-height bằng heigth là một lựa chọn hợp lý:

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Demo: http://codepen.io/chriscoyier/pen/LxHmK

• Trên nhiều row: sử dụng thuộc tính display và vertical-align: middle

.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

Demo: http://codepen.io/chriscoyier/pen/ekoFx

Hoặc cũng có thể sử dụng flex-box:

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Demo: http://codepen.io/chriscoyier/pen/uHygv

Nếu không muốn sử dụng 2 cách ở trên, chúng ta có thể sử dụng kỹ thuật pseudo element. Bằng cách tạo một pseudo element bên trong container và sau đó align các element bên trong theo pseudo element này:

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

Demo: http://codepen.io/chriscoyier/pen/ofwgD

• align các block element

• Trường hợp biết chiều cao của element

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

Demo: http://codepen.io/chriscoyier/pen/HiydJ

• Trường hợp không biết chiều cao

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo: http://codepen.io/chriscoyier/pen/lpema

• Nếu bạn có thể dùng flexbox, điều đó thật đơn giản:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Demo: http://codepen.io/chriscoyier/pen/FqDyi

3. Center theo cả 2 chiều ngang và dọc

• Nếu element có height và width được fix

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

Demo: http://codepen.io/chriscoyier/pen/JGofm

• Nếu element không biết height và width

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

Demo: http://codepen.io/chriscoyier/pen/lgFiq

• Nếu có thể sử dụng Flexbox

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

Demo: http://codepen.io/chriscoyier/pen/msItD

** Kết Luận** Chúng ta đã có thể hoàn toàn center được các element trong CSS

Tài liệu tham khảo:

https://css-tricks.com/centering-css-complete-guide