vertical align an element with position absolute and flex-box

Run

Save

Help

Keyboard Shortcuts

CTRL + Return Run fiddly
CTRL + S Save fiddly
CTRL + E New fiddly
CTRL + Shift + BackspaceReset Layout

Note: Press F11 when cursor is in the editor to toggle full screen editing.

Share link

Share full screen result

Embed on your website

Latest edits

1. Google roboto font use

2. Get list of all domains users for images on the webpage

3. My Browser User agent

4. vertical align an element with position absolute and flex-box

5. async await sample code

6. get all image on page whose size is more than 500kb

7. lazy load images loading

8. Embed iframe youtube video

<div class="container">
  <div class="child"></div>
</div>

<div class="flex-container">
  <div class="flex-child"></div>
</div>

CSS

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex-container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Center vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Keyboard Shortcuts

Meta

Latest edits

HTML

CSS

JS