Artigo Diretório
1. Os elementos na linha são centralizados horizontalmente
Método 1.alinhamento de texto: centro;
Demonstração de código
<style>
.parent {
background-color: red;
text-align: center;
height: 40px;
}
</style>
</head>
<body>
<!-- 行内元素居中 水平居中 给父元素设置也可以因为有继承性 -->
<div class="parent">
<span class="child">行内元素水平居中</span>
</div>
</body>
Método 2.width: fit-content;
Demonstração de código
<style>
.box {
background-color: red;
}
.parent {
background-color: pink;
/* 此时父元素的宽度会适应子元素的宽度 然后在父元素身上加上margin 即可水平居中 */
width: fit-content;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">
<span class="child">行内元素水平居中</span>
</div>
</div>
</body>
2. Os elementos em linha são centralizados verticalmente
Método 1.line-height (apenas para texto de uma linha, o texto de várias linhas não tem efeito)
<style>
.box {
width: 200px;
line-height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span class="child">垂直居中</span>
</div>
</body>
3. Elementos de nível de bloco são centralizados horizontalmente
Método 1.margin: 0 auto;
Demonstração de código
<style>
.parent {
background-color: red;
}
.child {
width: 150px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">块级元素水平居中</div>
</div>
</body>
Quatro. Obtenha centralização horizontal e vertical
Método 1. Posicionamento para alcançar
Demonstração de código
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/* 减去子元素高宽自身的一半 */
margin-top: -50px;
margin-left: -50px;
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Método 2. Posicionamento + transformação
Demonstração de código
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 用transform 可以动态检测到子元素的宽高了 如果子元素宽高改变了我们不用担心了 */
transform: translate(-50%, -50%);
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Método 3. Posicionamento + margem
Demonstração de código
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
/* 原理就是让top left right bottom 设置为0 此时子元素会填充父元素所有可用空间 就有了可分配空间 然后在设置margin水平方向居中即可 */
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Método 4. preenchimento para alcançar
Demonstração de código
<style>
.parent {
/* 父元素没有设置宽高 子元素的宽高就是父元素的宽高*/
background-color: red;
padding: 20px;
}
.child {
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
Método 5.flex para alcançar
Demonstração de código
<style>
.parent {
height: 200px;
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>