Lo pensé cuando me encontré con una pregunta clásica de una entrevista.
Esta pregunta es relativamente simple, pero no es tan fácil pensar desde varios ángulos. De hecho, los distintos métodos son similares.
estructura basica:
<body>
<div id="con">
<div id="back" class="center">
</div>
</div>
</body>
1. Utilice el posicionamiento absoluto para establecer los atributos superior, izquierdo y de margen.
#back {
position: absolute;
width: 300px;
height: 300px;
background-color: gray;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}2. Utilice el posicionamiento absoluto para establecer la propiedad superior derecha inferior izquierda.
#back {
position: absolute;
width: 300px;
height: 300px;
border: 1px solid red;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}3. Utilice un diseño flexible
#con {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
#back {
width: 300px;
height: 300px;
border: 1px solid purple;
}De hecho, estos usos básicos rara vez se utilizan en proyectos de ingeniería y todos se basan en marcos. Sin embargo, los principios básicos aún deben conocerse. Explore otras formas por su cuenta.
La vida tiene un límite pero el conocimiento no.