andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add extractor and builder

Browse Source 
Tested and working
This commit is contained in:
Angelos Chalaris
2019-08-22 14:04:18 +03:00
parent 343f8fd4c7
commit a8818b1998
101 changed files with 18465 additions and 9908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/transform-centering.md
View File

@ -5,14 +5,10 @@ tags: layout,intermediate
Vertically and horizontally 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
<div class="parent"><div class="child">Centered content</div></div>
```
#### CSS
```css
.parent {
border: 1px solid #333;
@ -30,8 +26,6 @@ Vertically and horizontally centers a child element within its parent element us
}
```
#### Demo
#### Explanation
1. `position: absolute` on the child element allows it to be positioned based on its containing block.