Skip to content

Instantly share code, notes, and snippets.

@ruyaoyao

ruyaoyao/index.html

Last active May 23, 2017 02:20
Show Gist options
  • Save ruyaoyao/5db9790d0fc7fc299aae0ef3dd903004 to your computer and use it in GitHub Desktop.
Save ruyaoyao/5db9790d0fc7fc299aae0ef3dd903004 to your computer and use it in GitHub Desktop.
Download ZIP
CSS 垂直置中解法, Making element to align vertically. JS Bin// source http://jsbin.com/dunutiwone
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
.ot {
width: 400px;
height: 400px;
border: 1px solid #FF6600;
text-align: center;
margin: 0 auto;
}
.ot:before {
content: '';
display: inline-block;
vertical-align: middle ;
height: 100%;
}
.wrapper {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
background: #ccc;
}
</style>
</head>
<body>
<div class="ot">
<div class="wrapper"></div>
</div>
<script id="jsbin-source-css" type="text/css">.ot {
width: 400px;
height: 400px;
border: 1px solid #FF6600;
text-align: center;
margin: 0 auto;
}
.ot:before {
content: '';
display: inline-block;
vertical-align: middle ;
height: 100%;
}
.wrapper {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
background: #ccc;
}
</script>
</body>
</html>
Raw
jsbin.dunutiwone.css
.ot {
width: 400px;
height: 400px;
border: 1px solid #FF6600;
text-align: center;
margin: 0 auto;
}
.ot:before {
content: '';
display: inline-block;
vertical-align: middle ;
height: 100%;
}
.wrapper {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
background: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment