Skip to content

Instantly share code, notes, and snippets.

@Calerme
Last active March 14, 2018 10:52
Show Gist options
  • Save Calerme/5beead47a32d07699e40388c46f7c0f9 to your computer and use it in GitHub Desktop.
Save Calerme/5beead47a32d07699e40388c46f7c0f9 to your computer and use it in GitHub Desktop.
使用绝对定位实现宽高自适应&实现绝对定位元素水平垂直居中
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>绝对定位实现自适应与居中</title>
<style>
#box {
position: absolute;
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
/** 上面的代码已经实现了 #box 的自适应
* 如果要居中 #box 可以加上 width 与 height
*/
width: 300px;
height: 300px;
margin: auto; // 必须,否则无法实现居中
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment