<div class="wrapper">
<h1>Center an item</h1>
<p>The div below has a height of 300 pixels. The image is in the centre of that area horizontally and vertically.</p>
<div class="box">
<img alt="balloon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/square-balloon.jpg">
</div>
</div>
.box {
padding: 1em;
border: 4px solid #3F383C;
border-radius: 4px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
body {
background-color: #fff;
color: #333;
font: 20px Helvetica, Arial, sans-serif;
}
.wrapper {
margin: 0 auto;
max-width: 900px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.