Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="d1">
    <div id="d2"></div>
  </div>
  <div id="center"></div>
</body>
</html>
 
/*
- The Goal:
    #d2 is meant to have a variable dimension, and it's meant to be centered both horizontally and vertically in the page.
- The Problem:
    By putting #d2 into a absolutely positioned box and move #d2 relatively, I should be able to achieve what I want. But all major browsers refuse to center it vertically. I'm wondering which rules in the CSS spec demand this behavior, as I can't find them (at least not in CSS2.1).
*/
#d2 {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5);
  position: relative;
  left: -50%;
  top: -50%;
}
#d1 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: gray;
}
#center {
  width: 4px;
  height: 4px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers