GRAVEL
MDN
W3C
CSS-Tricks
Front-End Front
Hacker News
Product Hunt

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