Install Web App

BRIEF

MINA

CSS

Mengenal 3 Trik Pemusatan div

profil-penulis

Nuzul Karomah

17 Januari 2024

 

1. Menggunakan Position

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

Pertama, kita menentukan posisi relatif pada parent div dengan menggunakan property position: relative;.

Hal ini diperlukan agar child div bisa ditempatkan berdasarkan parent div. Selanjutnya, pada child div, kita menggunakan posisi absolut dengan property position: absolute;.

Kemudian, untuk mengatur agar div tersebut berada di tengah secara horizontal dan vertical, kita memberikan nilai 50% pada top dan left. Terakhir, kita menggunakan property transform dengan nilai translate(-50%, -50%); untuk memindahkan div ke posisi yang sebenarnya berada di tengah, sehingga div tersebut akan terdapat di tengah secara horizontal dan vertical.

2. Menggunakan Flexbox

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

Program di atas menggunakan flexbox untuk mengatur tata letak div. Dengan menggunakan properti display: flex pada elemen induk, div-div anak di dalamnya akan mengikuti tata letak flexbox.

Pada elemen induk, properti justify-content: center digunakan untuk mengatur div-div anak agar terpusat secara horizontal.

Sedangkan pada div-div anak, properti align-self: center digunakan untuk mengatur div tersebut agar terpusat secara vertikal. Dengan kombinasi ini, div akan terpusat secara horizontal maupun vertikal di dalam elemen induk.

3. Menggunakan Grid

.parent {
 display: grid;
}
.child {
 align-self: center;
 justify-self: center;
}

Program di atas menggunakan fitur Grid pada CSS untuk mengatur tata letak elemen-elemen di dalam sebuah kontainer (parent). CSS grid digunakan dengan menetapkan display: grid pada elemen yang menjadi kontainer (parent). Dalam contoh di atas, class "parent" ditetapkan dengan display: grid.

Kemudian, class "child" digunakan untuk mengatur letak elemen-elemen yang berada di dalam kontainer. Dalam contoh di atas, class "child" diberikan properti align-self: center; untuk mengatur posisi vertikal elemen di tengah kontainer, dan properti justify-self: center; untuk mengatur posisi horizontal elemen di tengah kontainer.

Dengan menggunakan grid, kita dapat dengan mudah mengatur tata letak elemen-elemen dalam sebuah kontainer, baik secara vertikal maupun horizontal, sehingga dapat menghasilkan desain halaman web yang lebih fleksibel dan responsif.

Artikel Lainnya Dengan Kategori Terkait :

1. 1 Menit Langsung Paham GAP Property CSS

2. 3 Trik Pada CSS

3. 4 Layout CSS Modern

4. 5 Tata Letak Modern di CSS

5. 5 Website Generator CSS

6. ALIGN ITEMS

7. ALIGN-SELF

8. Beberapa Cara Untuk Memusatkan Item Menggunakan CSS

9. Beberapa Contoh Gaya Powerfull Snippet

10. Beberapa Variasi Style CSS Button

11. Belajar CSS #01 | Apa Itu CSS?

12. Belajar CSS #02 | Inline CSS

13. Belajar CSS #03 | Internal CSS

14. Belajar CSS #04 | External CSS

15. Belajar CSS #05 | Syntax CSS

16. Belajar CSS #06 | Belajar lebih banyak cara menggunakan CSS Selector

17. Belajar CSS #07 | Pseudo-class

18. Belajar CSS #08 | Definisi Box Model

19. Belajar CSS #09 | Perhitungan Ukuran Lebar dan Tinggi Box Model

20. Belajar CSS #10 | box-sizing: border-box

21. Belajar CSS #11 | Display block

22. Belajar CSS #12 | Belajar display-inline

23. Belajar CSS #13 | Belajar Display Inline Block

24. Belajar CSS #14 | Position-static

25. Belajar CSS #15 | Position-relative

26. Belajar CSS #16 | position absolute

27. Belajar CSS #17 | position fixed

28. Belajar CSS #18 | Position Sticky

29. Belajar CSS #19 | Web Responsif - Viewport

30. Belajar CSS #20 | Menggunakan presentase untuk menentukan nilai lebar

31. Belajar CSS #21 | Properti Max width 100%

32. Belajar CSS #22 | Satuan "VW" Viewport Width

33. Belajar CSS #23 | Media query

34. Belajar CSS #24 | Belajar display-inline

35. Belajar CSS #25 | Display-none

36. Belajar Membuat Fitur Interaktif Efek Flipping Card Menggunakan CSS

37. Belajar Mengenal Neon Text Pada CSS

38. Buat Desain Web Responsif CSS

39. Cara Membuat Badges Dengan HTML & CSS

40. Cara Membuat Balon Obrolan dengan CSS

41. Cara Membuat Efek Teks Berisi Gambar Pakai CSS

42. Cara Membuat Pemisah Antar Elemen di CSS

43. Cara Membuat Underline Tabs CSS

44. Cara Mengatur Proporsi Sebuah Teks di CSS

45. Contoh Penggunaan Grid Shorthand Area

46. CSS Media Queries

47. CSS MODERN LAYOUT

48. CSS Positioning

49. CSS SHORTHAND

50. Explorasi CSS Pulse Loader: Cara Efektif Membuat Animasi Form dengan CSS

51. Faded Background in CSS

52. GAP IN CSS FLEXBOX

53. Gaya Kartu Retro dalam Desain Web dengan CSS

54. Hover Effect Menggunakan CSS

55. How to Make Border Radius in CSS

56. How to make Card-Profile

57. Implementasi Aminasi Label Menggunakan CSSS

58. Implementasi Aspect - ratio CSS

59. Implementasi Jam Analog Sederhana

60. Input HTML Yang Perlu Diketahui

61. Insert Properti dalam CSS: Kunci Mengatur Jarak dalam Elemen HTML

62. Kembangkan Tampilanmu: 10 Trik Keren dengan CSS Filter 😎

63. Macam-Macam Properti Di CSS

64. Mask Text With Image In CSS

65. Memahami Anatomi CSS: Gaya yang Tepat untuk Elemen HTML

66. Memahami Efek Vignette dalam Desain Grafis dan Implementasinya dalam Kode HTML/CSS

67. Memahami Konsep Stretch Background dalam Desain Web : Membuat Gambar Latar Belakang Sesuai dengan Ukuran Elemen

68. Memahami Persingkatan CSS untuk Font: Penggunaan Singkat yang Efisien

69. Memahami Responsivitas Web dengan CSS :hover

70. Membuat Bentuk Organik yang Unik Menggunkan Simple Blob Shape

71. Membuat Button Menggunakan Tag Button

72. Membuat Latar Belakang "Faded" yang Elegan dengan CSS

73. Membuat Layout Yang Responsif Dengan CSS

74. Membuat Tampilan yang lebih Teratur menggunakan Elemen Opgroup dalam Select HTML

75. Membuat Tata Letak Secara Vertikal dan Horizontal dengan CSS Grid

76. Membuat Teks Lebih Menarik dengan CSS: Menggunakan Properti text-decoration

77. Mempelajari Border Pada CSS dan Trik Penulisan Singkat

78. Mempelajari Button Menggunakan Tag Button

79. Mempelajari Filter Blur Pada CSS

80. Mempelajari Penggunaan Margin dalam CSS

81. Mempelajari Selector :active Pada CSS

82. Mempercantik Pengalaman Pengguna dengan Efek Hover Menggunakan Selector CSS :has()

83. Mengatasi Teks Panjang dengan Efek Elipsis Long Text

84. Mengenal 3 Trik Pemusatan div

85. Mengenal CSS Clip-Path: Memotong Elemen dengan Berbagai Bentuk

86. Mengenal CSS Shapes: Membuat Bentuk-Bentuk Kreatif di Halaman Web

87. Mengenal Efek Kaca Glassmorphism Pada CSS

88. Mengenal Flex Wrap Pada CSS

89. Mengenal Flexbox - Flex Direction CSS

90. Mengenal Macam-macam Border Pada CSS

91. Mengenal Nilai Selector :nth-child() dalam CSS

92. Mengenal Properti CSS accent-color dan Penggunaannya

93. Mengenal Sematik Pada HTML

94. Menggunakan :is() untuk Menyederhanakan Selektor yang Rumit dalam CSS

95. Menggunakan Pseudo-Class :is() untuk Menjadikan Tombol Lebih Interaktif

96. Mengoptimalkan Tampilan Halaman Web dengan Media Query Orientation

97. Perbedaan Antara 'box-shadow' dan 'drop-shadow' dalam CSS untuk Efek Bayangan🌟

98. Perbedaan Antara content-box dan border-box dalam CSS:

99. Perbedaan Box Shadow vs Drop Shadow

100. Properti Justify-Content dalam CSS Flexbox

101. Pseudo-Class :has() dalam CSS

102. Responsive Button

103. Retro Card In CSS

104. Sebuah Trik Script Singkat Menggunakan CSS

105. Snippet

106. Stlanted Section

107. Syntax Baru Rentang Media Query pada CSS

108. TABULAR NUMBERS

109. Tampilan Modern dan Fungsional: Memahami Keunggulan Blur Sticky Navbar dalam Desain Situs Web

110. Tips Dasar CSS Yang Perlu Diketahui

111. Tips untuk Menggunakan Border Radius dalam Desain 🌟

112. Unveiling Hidden CSS Tricks

113. Zoom on hover

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya