目录
垂直居中
行内元素垂直居中
单行文本垂直居中
1.line-height: 200px;
多行文本垂直居中
1.table+vertical-align:middle
块级元素垂直居中
1.display: flex;align-items: center;
2.使用position + top +margin-top
水平居中
行内元素水平居中
1.text-align:center
编辑
块级元素水平居中
1.margin: 0 auto;
垂直水平居中
行内元素垂直水平居中
1.文本属性line-height+text-align
块级元素垂直水平居中
1.position+transform
2.flexbox
垂直居中
行内元素垂直居中
单行文本垂直居中
1.line-height: 200px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 200px;
border: 1px solid red;
height: 200px;
}
span{
line-height: 200px;
}
</style>
</head>
<body>
<div>
<span> 垂直居中!</span>
</div>
</body>
</html>
多行文本垂直居中
1.table+vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 200px;
border: 1px solid red;
height: 200px;
display: table;
}
span{
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span>
</div>
</body>
</html>
2.flex+align-items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 200px;
border: 1px solid red;
height: 200px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div>
<span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span>
</div>
</body>
</html>
块级元素垂直居中
1.display: flex;align-items: center;
不是所有的浏览器都可以兼容
2.使用position + top +margin-top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.out{
width: 500px;
height: 500px;
background-color: skyblue;
position: relative;
}
.in{
width: 100px;
height: 100px;
background-color: salmon;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>兼容性较好
让一个块级元素垂直居中的八种方法_块元素垂直居中__张张张i的博客-CSDN博客
水平居中
行内元素水平居中
1.text-align:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent {
text-align: center;
}
</style>
</head>
<body>
<div class='parent'>
<span>123</span>
</div>
</body>
</html>
块级元素水平居中
1.margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.child {
background: skyblue;
width:200px;
height:200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'></div>
</div>
</body>
</html>
垂直水平居中
行内元素垂直水平居中
1.文本属性line-height+text-align
文本属性的话，如果你的行内元素是文本，你可以使用line-height和text-align来实现水平和垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent {
width: 500px;
height: 500px;
background-color: aqua;
text-align: center; /* 水平居中 */
line-height: 500px; /* 垂直居中 */
}
</style>
</head>
<body>
<div class='parent'>
<span>123</span>
</div>
</body>
</html>
块级元素垂直水平居中
1.position+transform
.container 元素被设置为相对定位，以作为 .content 元素的定位参考。.content 元素被绝对定位到 .container 内，然后使用 top: 50%; left: 50%; 将其移动到容器的中心。最后，transform: translate(-50%, -50%); 用于微调元素的位置，使其完全居中。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 100vh; /* 或者其他适当的高度 */
background-color: aqua;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="content">要居中的内容</div>
</div>
</body>
</html>
使用 transform: translate(-50%, -50%); 是一种在垂直和水平方向上同时将元素居中的常用技巧。这是因为 transform 的 translate 函数可以通过百分比单位相对于元素自身的尺寸进行计算。
让我们来解释一下为什么要使用 -50% 的情况：
-
水平居中（左右方向）：
- 当你设置
left: 50%;时，元素的左侧边界会定位在容器的中心点位置。 - 但元素的中心点不在容器的中心，而是位于元素自身的宽度的一半处。
- 通过使用
transform: translateX(-50%);，元素会向左移动自身宽度的一半，从而将元素的中心点与容器的中心点对齐，实现水平居中。
- 当你设置
-
垂直居中（上下方向）：
- 同样，当你设置
top: 50%;时，元素的顶部边界会定位在容器的中心点位置。 - 但元素的中心点不在容器的中心，而是位于元素自身的高度的一半处。
- 通过使用
transform: translateY(-50%);，元素会向上移动自身高度的一半，从而将元素的中心点与容器的中心点对齐，实现垂直居中。
- 同样，当你设置
综合起来，transform: translate(-50%, -50%); 是将元素在水平和垂直方向上同时移动，使其中心点与容器的中心点对齐，从而实现元素的完全居中。
2.flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器铺满整个视口高度 */
background-color: lightgray;
}
.content {
display: inline-block; /* 将元素设置为行内块元素 */
padding: 20px;
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">要居中的内容</div>
</div>
</body>
</html>
大多数现代浏览器都支持它。然而，如果你需要考虑更旧的浏览器，特别是IE9及更早版本，Flexbox的支持可能会有限
参考文章来自：
元素居中的N种方法 - 掘金
css 水平居中（8种方法）、垂直居中（8种方法） - 掘金 (juejin.cn)
