沈阳微营销网站制作微信搜一搜排名优化
博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。
1、盒子宽度和高度是已知的。思路：
- 父元素相对定位；
- 子元素绝对定位；
- left: 50%; top: 50%;
- margin-left: 负的一半宽度; margin-top: 负的一半高度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo1</title><style type="text/css">html,body {height: 100%;position: relative;overflow: hidden;}.box {height: 150px;width: 300px;background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;position: absolute;top: 50%;left: 50%;margin-top: -75px;margin-left: -150px;}</style>
</head>
<body><div class="box">盒子垂直水平居中</div>
</body>
</html>
2、盒子宽度和高度是未知的（有高、宽，但是不知道）。思路：
- 父元素相对定位；
- 子元素绝对定位；
- top: 0; right: 0; bottom: 0; left: 0;
- margin: auto;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo2</title><style type="text/css">html,body {height: 100%;position: relative;overflow: hidden;}.box {height: 150px;width: 300px;background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style>
</head>
<body><div class="box">盒子垂直水平居中</div>
</body>
</html>
3、平移：定位 + transform。思路：
- 父元素相对定位；
- 子元素绝对定位；
- top: 50%; left: 50%;
- transform: translate(-50%, -50%);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo3</title><style type="text/css">html,body {height: 100%;position: relative;overflow: hidden;}.box {background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div class="box">盒子垂直水平居中</div>
</body>
</html>
4、flex 布局。思路：
- 在父级元素中采用flex布局：display: flex; justify-content: center; align-items: center;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo4</title><style type="text/css">html,body {height: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;}.box {height: 150px;width: 300px;background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;}</style>
</head>
<body><div class="box">盒子垂直水平居中</div>
</body>
</html>
5、父元素：display: table-cell 布局。思路：
- 父元素：display: table-cell; vertical-align: middle; text-align: center;
- 父元素有固定的宽高；
- 子元素：display: inline-block；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo6</title><style type="text/css">.box1 {height: 300px;width: 600px;background-color: blue;display: table-cell;vertical-align: middle;text-align: center;overflow: hidden;}.box2 {display: inline-block;height: 150px;width: 300px;background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;}</style>
</head>
<body><div class="box1"><div class="box2">盒子垂直水平居中</div></div>
</body>
</html>
6、通过JavaScript的方式。思路：
- 父元素相对定位；
- 子元素绝对定位；
- 获取父元素的 clientHeight 和 clientWidth；
- 获取子元素的 offsetHeight 和 offsetWidth；
- 计算子元素的 top 和 left。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子垂直水平居中demo6</title><style type="text/css">html,body {height: 100%;overflow: hidden;position: relative;}.box {height: 150px;width: 300px;background-color: antiquewhite;border: 2px solid #000;line-height: 146px;text-align: center;position: absolute;}</style>
</head>
<body><div class="box" id="box">盒子垂直水平居中</div><script type="text/javascript">let HTML = document.documentElement,winH = HTML.clientHeight,winW = HTML.clientWidth,boxH = box.offsetHeight,boxW = box.offsetWidth;box.style.top = (winH - boxH) / 2 + "px";box.style.left = (winW - boxW) / 2 + "px";</script>
</body>
</html>
博主水平有限，若发现文中存在问题，欢迎留言指正！