Skip to content

Instantly share code, notes, and snippets.

@kozaru
Created August 7, 2014 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kozaru/ee8df2627216b72e6b8a to your computer and use it in GitHub Desktop.
Save kozaru/ee8df2627216b72e6b8a to your computer and use it in GitHub Desktop.
position: absolute; を上下左右中央配置にする方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test {
position: absolute;
top: auto;
left: auto;
right: auto;
bottom:auto;
margin: auto;
width: 300px;
height: 300px;
}
.test2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
margin: auto;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="test">
<h1>Absolutely positioned element</h1>
<p>text...class="test"</p>
</div>
<div class="test2">
<h1>Absolutely positioned element</h1>
<p>text... class="test2"</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment