1. Centra el texto horizontal y verticalmente
2. La caja está centrada horizontal y verticalmente
1. Márgenes
2. Posicionamiento
3. Panorámica
4. Caja elástica (simple, rápida, de uso común, recomendada)
Línea divisoria----------------------------------------------
1. Centra el texto horizontal y verticalmente
line-height = height 文本垂直居中
text-align:center 文本水平居中efecto de visualización
<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. La caja está centrada horizontal y verticalmente
1. El cuadro está centrado horizontalmente en el navegador (una máscara utilizada por muchos diseños de páginas web)
margin: 0 auto;Visualización de efectos
<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. El cuadro está centrado horizontalmente en el cuadro principal (margen)
水平方向：auto 自适应
垂直方向：（父级元素高度/2)-（子元素/2）
存在问题：高度塌陷
父级元素会跟着子元素margin向下移动
解决问题：
给父级元素添加 overflow:hidden; efecto de visualización
<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. El cuadro está centrado horizontalmente en el cuadro principal (posición de posicionamiento)
使用定位让盒子水平垂直居中
1.给盒子设置定位
2.设置盒子的top、left（或bottom、right）偏移量为
top:50%
left:50%
3.设置盒子的外边距
margin-top:-(盒子高度/2)
margin-left:-(盒子宽度/2)efecto de visualización
<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. El cuadro está centrado horizontalmente en el cuadro principal (transformar transformar)
配合定位使用：
1.给盒子添加定位
2.设置盒子的top、left偏移量（同上）
3.设置盒子在水平垂直方向的平移(相对于自身进行平移)
transform: translate(-50%,-50%) efecto de visualización
ídem
<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>Más tarde, aprendí un método y lo agregué.
4. La caja está centrada horizontalmente en la caja principal (caja flexible) (recomendado)
1.使用display:flex将父级盒子转换为弹性盒子
2.使用弹性盒子的属性
justify-content: center;
align-items: center;Efecto:
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>Realice directa y fácilmente el centrado vertical y horizontal de la caja
Lo anterior es mi propio resumen, por favor dé un consejo.