Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="app/src/js/demo.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,
        body {
            height: 100%;
        }
        #box {
            width: 200px;
            height: 200px;
            border:1px solid #333;
            /*脱离文档流*/
            position: relative;
            left: 0;
            right:0;
            /*偏移*/
            top: 50%;
            bottom:0;
            /*margin: -100px auto 0 auto;*/
            /*-50%代表上移盒子高度的一半*/
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            margin: 0 auto;
        }
        #dot {
            position: absolute;
            left:0;
            right:0;
            width: 10px;
            height: 10px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: deepskyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
​
<div id="box">
    <span id="point">
        (0, 0)
    </span>
    <span id="dot"></span>
</div>
​
​
</body>
</html>
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers