Edição de composição | Song Dashi
Operação da plataforma |
UMA descrição do problema
Mark em 6 de maio de 2023, não te vejo há muito tempo.
O que quero compartilhar com você hoje é como realizar a centralização vertical e horizontal dos elementos.
Recentemente, tenho resolvido questões reais de entrevistas sobre CSS, mas por causa do feriado de 1º de maio, o progresso foi adiado. Hoje, gostaria de compartilhar um dos resultados da colação, sobre a implementação da centralização vertical e horizontal de elementos comumente usados em projetos.
Requisitos específicos: liste por classificação de elemento, separe métodos de implementação comumente usados e raramente usados e tente ser o mais abrangente possível.
Questões específicas: 1. Quais são as classificações dos elementos 2. Como implementar cada elemento e quais os métodos de implementação mais utilizados e melhores.
Hoje, neste artigo, usamos a linguagem mais concisa para entender corretamente as questões acima.
DUAS soluções de problemas
1. Visão geral do código
O código para centralização vertical e horizontal dos melhores elementos é o seguinte, copie e use diretamente!
【最好用的垂直居中方式】
1、两行代码实现。将父元素设置为 Flex 布局，再给要居中的子元素添加margin：auto。
2、对于 行元素、行块元素、块元素 都适用。
<body>
<div class="fatherDiv">
<div class="sonDiv">哈哈哈哈</span>
</div>
</body>
<style>
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
background-color: pink;
margin: auto;
}
</style>
2. Análise do problema
1. P: Quais são as classificações dos elementos?
responder:
Elementos de bloco, display: block; , ocupam uma linha por si mesmos e podem definir largura e altura;
Elementos de bloco de linha, display: inline-block; , são exibidos na mesma linha e a largura e a altura podem ser definidas;
Elementos de linha, exibição: inline; , são exibidos na mesma linha e largura e altura não podem ser definidas.
2. Pergunta: Como implementar cada elemento e quais métodos de implementação são os mais usados e os melhores?
responder:
elemento de linha:
1、alinhamento de texto + altura da linha
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
2、display: tabela-célula;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
3. tela: flexível; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
4. tela: flexível; [fácil de usar]
/* elemento pai */
.fatherDiv { largura: 500px; altura: 500px; cor de fundo: verde; exibição: flex; } /* elemento filho */ .sonDiv { largura : 200px ; ; exibição: inline;
margin: auto;
}
5、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. posição: absoluta; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、exibição: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
9、display: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
Elemento de bloco de linha:
1、alinhamento de texto + altura da linha + alinhamento vertical
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
2、display: tabela-célula;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}3. tela: flexível; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
4. tela: flexível; [fácil de usar]
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: inline-block;margin: auto; }
5、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. posição: absoluta; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、exibição: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
9、display: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
elemento de bloco:
1、display: tabela-célula;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
2. tela: flexível; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3. tela: flexível; [fácil de usar]
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: block;margin: auto; }
4、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
5、posição: absoluta;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
6. posição: absoluta; [fácil de usar]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7、exibição: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
8、exibição: grade;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
- FIM -