<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
ontent
=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<
link
rel
=
"stylesheet"
<
title
>Aligning Buttons</
title
>
<
style
type
=
"text/css"
>
html,
body {
height: 300px;
}
.top-left {
top: 0;
left: 0;
}
.top-center {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.top-right {
top: 0;
right: 0;
}
.mid-left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.mid-center {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.mid-right {
top: 50%;
right: 0;
transform: translateY(-50%);
}
.bottom-left {
bottom: 0;
left: 0;
}
.bottom-center {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.bottom-right {
bottom: 0;
right: 0;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green; text-align:center;"
>GeeksforGeeks</
h1
>
<
div
class
=
"container h-100"
>
<
div
class
=
"position-relative h-100"
>
<
div
class
=
"position-absolute top-left"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute top-center"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute top-right"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute mid-left"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute mid-center"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute mid-right"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute bottom-left"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute bottom-center"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
<
div
class
=
"position-absolute bottom-right"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>Click Me!</
button
>
</
div
>
</
div
>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>