Ada kalanya dalam membuat sebuah halaman web kita membutuhkan bagian yang harus berada di tengah. Biasanya kita menggunakan CSS property “text-align:center”.
Disini akan diberikan 6 cara untuk membuat bagian yang harus berada di tengah itu dengan menggunakan tag div dan CSS.
Cara 1: Menggunakan class parent dan child dengan property “position: relative” dan “margin:auto”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centering divs</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#parentContainer {
width: 100%;
height: 400px;
background-color: #2196F3;
position: relative;
}
#childContainer {
width: 100px;
height: 100px;
background-color: #b5deff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="parentContainer">Parent Container
<div id="childContainer">Child Container</div>
</div>
</body>
</html>Cara 2: Menggunakan class parent dan child dengan property “margin: auto” saja
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centering divs</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.center {
margin: auto;
padding: 10px;
width: 300px;
border: 3px solid #2196F3;
background-color: #b5deff;
text-align: center;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>Cara 3: Menggunakan property “margin: auto” dengan content image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centering divs</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.center {
display: block;
margin: auto;
content: url("./gambartengah.jpg");
}
</style>
</head>
<body>
<h2>Center Align Element</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center"></div>
</body>
</html>Cara 4: Menggunakan property “position: absolute” dan “transform: translate(-50%, -50%)”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Centering divs</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.center {
position: absolute;
transform: translate(-50%, -50%);
padding: 10px;
border: 3px solid green;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<div class="center">
<p>vertically and horizontally centered.</p>
</div>
</body>
</html>Cara 5: Menggunakan CSS Flexbox dengan property “display: flex” dan “justify-content: center” serta “align-items: center”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Center Div 5</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<div class="center">
<p>I am vertically and horizontally centered.<br>
<img src="./gambartengah.jpg" alt="Paris" /></p>
</div>
</body>
</html>Cara 6: Menggunakan CSS Grid dengan class parent child dan property “display: grid”, “justify-content: center” serta “align-content: center”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Center Div 5</title>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.parent {
display: grid;
justify-content: center;
align-content: center;
height: 600px;
width: 100%;
border: 1px solid black;
}
.child {
height: 200px;
width: 200px;
background-color: #2196F3;
text-align: center;
}
</style>
</head>
<body>
<h2>Grid Centering</h2>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>Selamat mencoba, semoga bermanfaat.
Happy Coding!