水平+垂直居中块状元素的各种方法整理
2021-01-20 本文已影响0人
microkof
前言
这个是老话题了，就不多说了。有句话说在前面：
-
案例都是直接在body里居中，给body设置了特别样式，但实践中肯定不是在body中居中，案例只是简单举例。
-
如果要全屏居中， 需要做一个全屏fixed容器，然后在容器里居中。案例就不对此举例了。
| 支持子元素百分比宽高 | 兼容性 | |
|---|---|---|
| 绝对定位 + margin:auto | 支持 | IE6 |
| 绝对定位 + 负margin | 不支持 | IE6 |
| 绝对定位 + calc | 不支持 | IE9 |
| 绝对定位 + translate | 支持 | IE9 |
| table-cell | 支持 | IE8 |
| Flex | 支持 | IE10 |
| Grid | 支持 | IE10 |
绝对定位系列
绝对定位 + margin:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 先在父元素上设置相对定位 */
body {
position: relative;
}
.center {
/* 绝对定位 */
position: absolute;
/* 上下左右全部为0 */
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 给定宽高 */
width: 70%;
height: 25%;
/* 令外边距自动填充 */
margin: auto;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
绝对定位 + 负margin
兼容性：IE6
特点：定位元素不支持百分比宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 先在父元素上设置相对定位 */
body {
position: relative;
}
.center {
/* 绝对定位 */
position: absolute;
/* 上方和左方为50%，这是写死的 */
top: 50%;
left: 50%;
/* 给定宽高 */
width: 300px;
height: 200px;
/* 上外边距为负的给定高度的一半 */
margin-top: -100px;
/* 左外边距为负的给定宽度的一半 */
margin-left: -150px;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
绝对定位 + calc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 先在父元素上设置相对定位 */
body {
position: relative;
}
.center {
/* 绝对定位 */
position: absolute;
/* 减去的值是height和width的一半 */
top: calc(50% - 100px);
left: calc(50% - 150px);
/* 给定宽高 */
width: 300px;
height: 200px;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
绝对定位 + translate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 先在父元素上设置相对定位 */
body {
position: relative;
}
.center {
/* 绝对定位 */
position: absolute;
/* 上方和左方为50% */
top: 50%;
left: 50%;
/* 这个50%是相对于自身宽高而言的 */
transform: translate(-50%, -50%);
/* 宽高可以设百分比 */
width: 30%;
height: 40%;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
body {
/* 令body全屏显示 */
width: 100vw;
height: 100vh;
/* 显示为表格的格子 */
display: table-cell;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
vertical-align: middle;
/* 灰色背景 */
background: gray;
}
.center {
/* 显示为行内块元素 */
display: inline-block;
/* 宽高支持百分比 */
width: 30%;
height: 40%;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
Flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 找到中央盒子的直接父元素 */
body {
/* 令其变成弹性布局 */
display: flex;
}
.center {
/* 自动外边距 */
margin: auto;
/* 白色背景 */
background: white;
/* 宽高支持百分比 */
width: 30%;
height: 40%;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
Grid
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 中央盒子的直接父元素 */
body {
/* 令其变成网格布局 */
display: grid;
/* 令子元素居中 */
place-items: center;
}
.center {
/* 宽高支持百分比 */
width: 30%;
height: 40%;
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div>dsf sdf sd sd</div>
<div class="center"></div>
</body>
</html>
