1. Centralize o div horizontalmente
1. Especifique a largura do elemento e centralize automaticamente as margens esquerda e direita
.center{
width:100px;
margin-left:auto;
margin-right:auto;
}
2. O bloco embutido implementa o método de centralização horizontal
Para definir o atributo text-align como "center" no contêiner pai do elemento
.parent{
text-align: center;
}
.parent li{
display : inline-block;
display inline;
}
Desvantagens: É necessário processamento adicional de compatibilidade de navegador de bloco embutido.
3. Método flutuante para obter centralização horizontal
É preciso determinar o percentual do genitor para conseguir o efeito na sentença
.parent{
float: left;
width:100%;
overflow: hidden;
position: relative;
}
.parent li{
float: left;
width:50%;
position: relative;
}
4. CSS3 flex implementa método de centralização horizontal
exibição: flexível;
justificar-conteúdo:centro;
5. fit-content é um novo valor de atributo adicionado ao atributo “largura” em CSS
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;