1. Centralize o texto horizontal e verticalmente
2. A caixa é centralizada horizontal e verticalmente
1. Margens
2. Posicionamento
3. Panorâmica
4. Caixa Elástica (simples, rápida, comumente usada, recomendada)
Linha divisória----------------------------------------------
1. Centralize o texto horizontal e verticalmente
line-height = height 文本垂直居中
text-align:center 文本水平居中efeito de exibição
<style>
.box1{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
.box2{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: green;
color: #fff;
/* 设置元素外边距 */
margin-left: 20px;
/*文本垂直居中*/
line-height: 200px;
/* 文本水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box1">文本原来位置</div>
<div class="box2">文本水平垂直居中</div>
</body>2. A caixa é centralizada horizontal e verticalmente
1. A caixa é centralizada horizontalmente no navegador (uma máscara usada por muitos layouts de página da web)
margin: 0 auto;Exibição de efeito
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
/* 上下外边距为0，左右外边距为自适应 */
/* margin: 0 auto; */
/* 简写 */
margin: auto;
}
</style>
</head>
<body>
<div class="box">盒子水平居中</div>
</body>2. A caixa é centralizada horizontalmente na caixa principal (margem)
水平方向：auto 自适应
垂直方向：（父级元素高度/2)-（子元素/2）
存在问题：高度塌陷
父级元素会跟着子元素margin向下移动
解决问题：
给父级元素添加 overflow:hidden; efeito de exibição
<style>
.outer{
width: 400px;
height: 400px;
background-color: red;
/* 解决高度塌陷问题 */
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: green;
/*
子元素水平垂直居中
*/
margin: 150px auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>3. A caixa é centralizada horizontalmente na caixa principal (posição de posicionamento)
使用定位让盒子水平垂直居中
1.给盒子设置定位
2.设置盒子的top、left（或bottom、right）偏移量为
top:50%
left:50%
3.设置盒子的外边距
margin-top:-(盒子高度/2)
margin-left:-(盒子宽度/2)efeito de exibição
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>4. A caixa é centralizada horizontalmente na caixa principal (transformar transformação)
配合定位使用：
1.给盒子添加定位
2.设置盒子的top、left偏移量（同上）
3.设置盒子在水平垂直方向的平移(相对于自身进行平移)
transform: translate(-50%,-50%) efeito de exibição
idem
<style>
.outer{
/* 父级元素相对定位 子绝父相 */
position: relative;
width: 300px;
height: 300px;
background-color:pink;
}
.inner{
/* 子元素绝对定位 */
position: absolute;
width: 100px;
height: 100px;
background-color: green;
/* 水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>Mais tarde, aprendi um método e o acrescentei.
4. A caixa é centralizada horizontalmente na caixa principal (caixa flexível) (recomendado)
1.使用display:flex将父级盒子转换为弹性盒子
2.使用弹性盒子的属性
justify-content: center;
align-items: center;Efeito:
código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: green;
/* 将父级盒子设为弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>Realize direta e facilmente a centralização vertical e horizontal da caixa
O texto acima é meu próprio resumo, por favor, dê conselhos