您的位置：首页 > Web前端 > CSS

CSS 实现：元素相对于文档水平垂直居中

2016-05-13 18:05 831 查看

【要求】：如何用 CSS 实现水平/垂直居中一个元素（相对于文档）

<body>
<div class="content"></div>
</body>

【实现】：

① margin + 相对定位（relative)

// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式（margin:0; padding:0）

html, body {
height: 100%;
margin: 0;
padding: 0;
}

.content {
width: 200px;
height: 200px;
background: #0f0;

margin: 0 auto; // 水平居中
position: relative; // 相对于自身静态位置进行定位
top: 50%;   // 向下偏移 body 高度的50%
transform: translateY(-50%); // 向上偏移自身高度的 50%
}

② 不使用 margin，只用相对定位（relative)

// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式（margin:0; padding:0）
html, body {
height: 100%;
margin: 0;
padding: 0;
}

.content {
width: 200px;
height: 200px;
background: #0f0;

position: relative; // 相对于自身静态位置进行定位
top: 50%;   // 向下偏移 body 高度的50%
left: 50%;  // 向左偏移 body 宽度的50%
transform: translate(-50%, -50%); // 向上/左偏移自身高度/宽度的 50%
}

♫ 注意，实现二中的 transform 不能分开写，类似于下面这样，这样后写的 transform 会覆盖先写的，将导致只能实现一处偏移。

top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translateY(-50%);

③ 使用 absolute + margin: auto;

html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}

.content {
width: 200px;
height: 200px;
background: #0f0;

position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

效果预览

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航