| HTML element.
+2. `text-align: center` on '.center > span' centers the child element horizontally.
+2. `vertical-align: middle` on '.center > span' centers the child element vertically.
+
+The outer parent ('.container' in this case) must have a fixed height and width.
+
+#### Browser support
+
+✅ No caveats.
+
+* https://caniuse.com/#search=display%3A%20table
+
+
diff --git a/snippets/offscreen.md b/snippets/offscreen.md
new file mode 100644
index 000000000..5df930f14
--- /dev/null
+++ b/snippets/offscreen.md
@@ -0,0 +1,86 @@
+### Offscreen
+
+A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ([ADA](https://adata.org/learn-about-ada)) development when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM.
+
+#### HTML
+
+```html
+
+ Learn More
+ about pants
+
+```
+
+#### CSS
+
+```css
+.offscreen {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+```
+
+#### Demo
+
+
+
+
+#### Explanation
+
+1. Remove all borders.
+2. Use `clip` to indicate that no part of the element should be shown.
+3. Make the height and width of the element 1px.
+4. Negate the elements height and width using `margin: -1px`.
+5. Hide the element's overflow.
+6. Remove all padding.
+7. Position the element absolutely so that it does not take up space in the DOM.
+
+#### Browser support
+
+✅ No caveats.
+
+(Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.)
+
+* https://caniuse.com/#search=clip
+
+
diff --git a/snippets/transform-centering.md b/snippets/transform-centering.md
new file mode 100644
index 000000000..e7bfd8d6e
--- /dev/null
+++ b/snippets/transform-centering.md
@@ -0,0 +1,67 @@
+### Transform Centering
+
+Vertically and horitonally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
+
+#### HTML
+
+```html
+
+
+```
+
+#### CSS
+
+```css
+.parent {
+ border: 1px solid #333;
+ height: 250px;
+ position: relative;
+ width: 250px;
+}
+
+.child {
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+```
+
+#### Demo
+Centered content
+
+
+
+
+
+#### Explanation
+
+1. `position: absolute` on the child element allows it to be positioned based on its containing block.
+2. `left: 50%` and `top: 50%` offsets the child 50% from the left and top edge of its containing block.
+3. `transform: translate(-50%, -50%)` allows the height and width of the child element to be negated so that it is vertically and horizontally centered.
+
+Note: Fixed height and width on parent element is for the demo only.
+
+#### Browser support
+
+⚠️ Requires prefix for full support.
+
+* https://caniuse.com/#search=transform
+
+
+
+Centered content
+ |