How do I center this
- Thread starter Annabella
- Start date
- Status
PebbleHost
High performance, consistent uptime and fast support. Minecraft hosting that just works.
Yep, sometimes thing's can get jammy
ow xDYep, sometimes thing's can get jammy
Banned forever. Reason: Leaking user resources
Absolute positioning (beginner friendly)
Here's the CodePen: https://codepen.io/Athys/pen/JjdEoXK
Flexbox (advanced)
Here's the CodePen: https://codepen.io/Athys/pen/poJRvyB
HTML:
<body>
<div class="imageContainer">
<img src="#" alt="#" class="image"/>
</div>
</body>
Code:
.imageContainer{
height: 100vh;
width: 100vw;
}
.image{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}Here's the CodePen: https://codepen.io/Athys/pen/JjdEoXK
Flexbox (advanced)
Code:
.imageContainer{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.image{
// Any other styling you want to apply to the image
}Here's the CodePen: https://codepen.io/Athys/pen/poJRvyB
Last edited:
What is confusing you?
- Status
