Estas son las principales referencia CHRIS Coyier para escribir un artículo ( clic para ver ), refería sobre todo a nivel de CSS, algunos métodos centrados verticalmente, detrás de cada método tiene una demo, puede ver los resultados en línea.
1 nivel
Centros horizontales tienen elementos en línea y elementos de bloque, tienen elementos en línea de texto, imágenes, enlaces, etc .; elemento de bloque es principalmente div, p y otros elementos de bloque.
1,1 elemento en línea
Para los elementos en línea se puede lograr utilizando un centro horizontal ( línea Ver demo ):
.blocklist1_1 {
text-align: center;
} Este método es eficaz para inline, inline-block, inline-table y así sucesivamente.
1.2 elementos
Para un elemento de bloque puede estar provisto que el margen-izquierda y el margen-derecho automático, como este ( vista en línea de demostración ):
.blocklist1_2 .div1 {
margin: 0px auto;
} Independientemente de si la anchura de los elementos de bloque son conocidos, se pueden implementar centrado horizontalmente.
1,3 pluralidad de elementos
Si tiene varios elementos de bloque necesidades centradas horizontalmente, hay dos maneras en que puede lograr. Uno de ellos es por medio de inline-block, el otro por medio de flex. Para el primer método se puede usar de la siguiente manera ( ver en línea de demostración ), elementos de bloque proporcionados display: inline-bloque, el nivel medio de su elemento padre:
..blocklist1_3 .div1 {
text-align: center;
}
.blocklist1_3 .div1 div {
display: inline-block;
}Si el elemento padre con bloques flexibles que añadir el estilo siguiente ( ver línea de demostración ):
.blocklist1_3 .div2 {
display: flex;
justify-content: center;
} 2 verticales
Centro vertical también se divide en elementos en línea y los elementos de bloque, pero en comparación centrado horizontalmente, verticalmente situación centrada aquí requiere un poco más discusión, analizamos uno por uno a continuación.
2,1 elemento en línea
2.1.1 sola línea
Para una sola línea de elementos en línea, sólo tenemos que configurar su padding-top y el valor de relleno de fondo igual a ( línea Ver demo ):
.blocklist2_1_1 .div1 {
padding-top: 20px;
padding-bottom: 20px;
} Si no podemos conjunto de relleno, entonces la altura de los elementos en línea (altura = 50 px) es conocida, se puede establecer line-height = altura, conseguir elementos de centraje verticales ( en línea ver demo ):
.blocklist2_1_1 .div2 {
line-height: 50px;
height: 50px;
} 2.1.2 multilínea
Para los elementos multilínea tenemos cuatro maneras de lograr centrado vertical:
. A puede ser igual a la que consigue proporcionando el valor central vertical, y padding-top padding-inferior como el de arriba ( Demo- 1. ):
.blocklist2_1_2 .div1 {
padding: 20px 0px;
} . B por medio de propiedad vertical-align se puede realizar centrada verticalmente ( Demo-2 ):
.blocklist2_1_2 .div2 {
display: table;
}
.blocklist2_1_2 .div2>div {
display: table-cell;
vertical-align: middle;
} . Técnica c puede ser implementado por medio de flex centrada verticalmente, basta con añadir el siguiente patrón ( demográficos 3. ):
.blocklist2_1_2 .div3 {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
} . D a una altura completa de los elementos postizos se colocan dentro del recipiente, y a continuación, establecer el texto alineado verticalmente ( Demo- 4. ):
.blocklist2_1_2 .div4 {
position:relative;
}
.blocklist2_1_2 .div4::before {
content: ' ';
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.blocklist2_1_2 .div4>div {
display: inline-block;
vertical-align: middle;
} 2.2 elementos
2.2.1 elementos de bloque de altura conocida
Diseño de página a veces se conoce la altura del elemento, a veces no sabemos. La altura conocida de los elementos de bloque puede estar dispuesto para alcanzar el centro vertical ( Demostración ):
.blocklist2_2_1 .div {
position: relative;
}
.blocklist2_2_1 .div div {
position: absoulte;
top: 50%;
height: 100px;
margin-top: -70px; //这里70px是height*1/2 + padding
padding: 20px;
} 2.2.2 Altura del bloque elemento desconocido
A veces no sabemos la altura de los elementos de bloque, que se pueden utilizar cuando se implementa la transformada ( demo ):
.blocklist2_2_2 .div {
position: relative;
}
.blocklist2_2_2 .div div {
transform: translateY(-50%);
top: 50%;
position: absoulte;
} 2.2.3 El uso de flex lograr
Además de estas dos opciones, también se puede utilizar para lograr la flexión ( demo ):
.blocklist2_2_3 .div {
display: flex;
flex-direction: column;
justify-content: center;
} Horizontal Vertical 3
A veces también esperamos que no sólo esperanza se centra horizontalmente centrado verticalmente, se puede combinar con los ejemplos antes mencionados se combinan para lograr, divididos en los siguientes tres aspectos:
3.1 la altura del elemento, la anchura conocida
Cuando se conocen la altura del elemento y la anchura, se puede elementos posicionados absolutamente, offset 50% del centro, y un valor negativo del margen logra de la siguiente manera ( Demostración ):
.blocklist3_1 .div {
position: relative;
}
.blocklist3_1 .div div {
position: absoulte;
top: 50%;
left: 50%;
margin: -120px 0px 0px -220px; //height一半，width一半，另外加上padding值
height: 200px;
width: 400px;
padding: 20px;
} 3.2 la altura del elemento, desconocido ancho
Si la altura y la anchura del elemento que es desconocida, podemos utilizar la propiedad transformar, impartiendo un negativo 50% en dos direcciones, como sigue ( Demostración ):
.blocklist3_2 .div {
position: relative;
}
.blocklist3_2 .div div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 3.3 Uso FlexBox lograr
Cuando se implementa con la necesidad de utilizar dos propiedades de flexión centrales ( de demostración ):
.blocklist3_3 .div {
display: flex;
justify-content: center;
align-items: center;
}