<main>Center me, please!</main>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
/* Base style */
main {
padding: 1em 1.5em;
box-sizing: border-box;
background: #655;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}
h1 {
margin: 0 0 .2em;
font-size: 150%;
}
p {
margin: 0;
}
body {
background: #fb3;
font: 100%/1.5 sans-serif;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.