Memusatkan perkara adalah salah satu aspek CSS yang paling sukar.
Kaedahnya sendiri biasanya tidak sukar difahami. Sebaliknya, ini disebabkan oleh banyak kaedah untuk memusatkan perhatian.
Kaedah yang anda gunakan boleh berbeza-beza bergantung pada elemen HTML yang ingin anda pusatkan, atau sama ada anda memusatkannya secara mendatar atau menegak.
Dalam tutorial ini, kita akan membahas cara memusatkan elemen yang berbeza secara mendatar, menegak, dan kedua-dua menegak dan mendatar.
Cara Berpusat Secara Mendatar
Memusatkan elemen secara mendatar lebih mudah daripada memusatkannya secara menegak. Berikut adalah beberapa elemen umum yang mungkin anda ingin pusatkan secara mendatar dan cara yang berbeza untuk melakukannya.
Cara Memusatkan Teks dengan Harta Pusat CSS Text-Align
Untuk memusatkan teks atau pautan secara mendatar, cukup gunakan text-alignharta dengan nilai center:
Hello, (centered) World!
p { text-align: center; }
Cara Memusatkan Div dengan CSS Margin Auto
Gunakan marginharta tanah dengan nilai 0 autountuk memusatkan elemen tahap blok seperti divmelintang:
.child { ... margin: 0 auto; }
Cara Memusatkan Div secara Mendatar dengan Flexbox
Flexbox adalah cara paling moden untuk memusatkan perkara di halaman, dan menjadikan reka bentuk susun atur responsif jauh lebih mudah daripada sebelumnya. Walau bagaimanapun, ia tidak disokong sepenuhnya dalam beberapa penyemak imbas lama seperti Internet Explorer.
Untuk memusatkan elemen secara mendatar dengan Flexbox, terapkan display: flexdan justify-content: centerpada elemen induk:
.container { ... display: flex; justify-content: center; }
Cara Berpusat secara menegak
Memusatkan elemen secara menegak tanpa kaedah moden seperti Flexbox boleh menjadi tugas sebenar. Di sini kita akan membahas beberapa kaedah lama untuk memusatkan perkara secara menegak terlebih dahulu, kemudian menunjukkan kepada anda cara melakukannya dengan Flexbox.
Cara Memusatkan Div Vertikal dengan Kedudukan Mutlak CSS dan Margin Negatif
Sejak sekian lama ini adalah kaedah untuk memusatkan perkara secara menegak. Untuk kaedah ini anda mesti mengetahui ketinggian elemen yang ingin anda pusatkan.
Pertama, tetapkan displaysifat elemen induk ke relative.
Kemudian untuk elemen anak, tetapkan displayharta ke absolutedan topke 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Tetapi itu betul-betul secara menegak memusatkan bahagian atas elemen anak.
Untuk benar-benar memusatkan elemen anak, tetapkan margin-topharta benda ke -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
Cara Memusatkan Div Vertikal dengan Transform dan Translate
Sekiranya anda tidak mengetahui ketinggian elemen yang ingin anda pusatkan (atau walaupun anda tahu), kaedah ini adalah muslihat yang bagus.
Kaedah ini sangat serupa dengan kaedah margin negatif di atas. Tetapkan displaysifat elemen induk ke relative.
Untuk elemen anak, tetapkan displayharta absolutedan tetapkan topke 50%. Sekarang daripada menggunakan margin negatif untuk benar-benar memusatkan elemen anak, gunakan transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Perhatikan bahawa translate(0, -50%)adalah pendek untuk translateX(0)dan translateY(-50%). Anda juga boleh menulis transform: translateY(-50%)untuk memusatkan elemen anak secara menegak.
Cara Memusatkan Div secara menegak dengan Flexbox
Seperti memusatkan sesuatu secara mendatar, Flexbox menjadikannya sangat mudah untuk memusatkan perkara secara menegak.
Untuk memusatkan elemen secara menegak, terapkan display: flexdan align-items: centerke elemen induk:
.container { ... display: flex; align-items: center; }
Cara Memusatkan Keduanya secara menegak dan mendatar
Cara Memusatkan Div secara Vertikal dan Melintang dengan Posisi Mutlak CSS dan Margin Negatif
Ini sangat serupa dengan kaedah di atas untuk memusatkan elemen secara menegak. Seperti kali terakhir, anda mesti mengetahui lebar dan ketinggian elemen yang ingin anda pusatkan.
Tetapkan displaysifat elemen induk ke relative.
Kemudian tetapkan harta anak displayke absolute, topke 50%, dan leftke 50%. Ini hanya memusatkan sudut kiri atas elemen anak secara menegak dan melintang.
Untuk benar-benar memusatkan elemen anak, terapkan margin atas negatif yang ditetapkan pada separuh ketinggian elemen anak, dan margin kiri negatif ditetapkan pada separuh lebar elemen anak:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
Cara Memusatkan Div secara Vertikal dan Melintang dengan Transform dan Translate
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.