Home / Docs
Centering (W3: Centering Things)
Paragraph
p.blocktext { margin-left: auto; margin-right: auto; width: 6em}
Image
img.displayed { display: block; margin-left: auto; margin-right: auto }
Vertical
div.container { min-height: 10em; display: table-cell; vertical-align: middle }
Vertical and Horizontal
div.container4 { height: 10em; position: relative } div.container4 p { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }
Vertical and Horizontal, with flexbox
div.container6 { height: 10em; display: flex; align-items: center; justify-content: center } div.container6 p { margin: 0 }
Responsiveness