1 Star 0 Fork 0

计爱玲 / WebTest

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
绝对定位和负外边距对块级元素进行垂直居中.html 829 Bytes
一键复制 编辑 Web IDE 原始数据 按行查看 历史
2604150210 提交于 2020-10-24 12:49 . 12种CSS垂直居中布局方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用绝对定位和负外边距对块级元素进行垂直居中</title>
<style>
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
}
</style>
</head>
<body>
<h1>使用绝对定位和负外边距对块级元素进行垂直居中</h1>
<p>这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。</p>
<div id="box">
<div id="child"></div>
</div>
</body>
</html>
1
https://gitee.com/jiailing/WebTest.git
git@gitee.com:jiailing/WebTest.git
jiailing
WebTest
WebTest
master

搜索帮助

14c37bed 8189591 565d56ea 8189591