Evan Genest's Learning Log

Web developer notes emphasizing LAMP, Symfony, PHP, Javascript, Drupal, and Node.

This is an Eleventy project created from the eleventy-base-blog repo.

HTML and CSS snippets


Centering something vertically and horizontally

Without Flexbox or Grid.

* {
margin: 0;
padding: 0;
box-sizing: border-box;

.container {
position: relative;
height: 400px;
border: 2px solid #006100;

.centered-element {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

<div class="container">
<div class="centered-element">
<p>As a sentence I consider myself doubly centered</p>