CenteringAnythingAnywhere.md

Centering Anything, Anywhere

CENTERING LINES OF TEXT

p { text-align: center }
h2 { text-align: center }

Centering a block

p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 8em
}

Centering an image

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

Centering a block or an image vertically

Centering vertically in level 3

Centering vertically and horizontally in level 3

Centering in the viewport in level 3

How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins
  First, set the position property of the parent element to relative.

Then for the child element, set the position property to absolute and top to 50%: `

<div class="container">
  <div class="child"></div>
</div></span>
.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  <br /><span style="font-size:1.5rem; color:#d35400">Setup</span>
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  <br /><span style="font-size:1.5rem; color:#d35400">Center vertically</span>
  position: absolute;
  top: 50%;
}

But that really just vertically centers the top edge of the child element.

To truly center the child element, set the margin-top property to -(half the child element's height):

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  <br /><span style="font-size:1.5rem; color:#d35400">Setup</span>
  position: relative;
}
 
.child {
  width: 50px;
  height: 50px;
  background-color: red;
  <br /><span style="font-size:1.5rem; color:#d35400">Center vertically</span>
  position: absolute;
  top: 50%;
  margin-top: -25px; <br /><span style="font-size:1.5rem; color:#d35400">Half this element's height</span>
}

Another quik trick with the same effect!

div.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle 
}

Center Everything With CSS

Horizontally
* inline elements
* Block-level parent element*

.center {
  text-align: center;
}

* block level element (one)
* Fix the width

.center-me {
  margin: 0 auto;
}

* block level elements (> 1)
* change to inline-block

.parentDiv {
  text-align: center;
}
.div {
  display: inline-block;
}

---

---

---

Vertically

* INLINE (single line)

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

* INLINE (single line NO padding)

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

* MULTIPLE LINES

.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

* GHOST ELEMENT

.ghost-center {
  position: relative;
}
.ghost-center:before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

* BLOCK-LEVEL (unknown height)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

* BLOCK-LEVEL (known height)
* Bump it down (top: 50%)
* Move element up half its own height

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

* FLEXBOX (parent)

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

* FLEXBOX (child) .child { margin: auto; }  

Both Horizontally & Vertically

* FIXED WIDTH + HEIGHT

  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

* UNKNOWN WIDTH + HEIGHT

  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

* FLEXBOX

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

* GRID

  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}