Solución:
usar vertical-align:middle agregar display:table-cellsobre .home-row y display:table sobre .home-container
mira aquí jsfiddle o fragmento
html,
body {
height: 100%;
}
.home-row {
vertical-align: middle;
display: table-cell;
}
.home-container {
width: 100%;
height: 100%;
background-color: rgba(139, 0, 0, 0.4);
display: table;
}<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>los alineación vertical La propiedad CSS especifica la alineación vertical de un cuadro en línea o de celda de tabla.
leer más aquí alineación vertical
EDITAR 2020
Hay una mejor manera de lograr el mismo resultado usando flexbox
Verifique el fragmento a continuación
Jugar con flexbox. Puede agregarlo en otros elementos, no solo en el contenedor
.home-container {
background: red;
display:flex;
flex-direction: column;
justify-content: center;
height:100vh;
}<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>Prueba esto:
<style>
.home-container {
width: 100%;
height: 800px;
background-color: rgba(139, 0, 0, 0.4);
text-align: center;
}
.some-other-class {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
HTML
<div class="home-container">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
html, body{
height:100%;
margin: 0;
}
.home-container{
width: 100%;
height: 100%;
display: table;
text-align: center;
background-color: rgba(139,0,0,0.4);
}
.home-row{
display: table-cell;
vertical-align: middle;
}<html lang="en">
<head>
<title>example</title>
<link href="https://foroayuda.es/example.css" rel="stylesheet">
</head>
<body>
<div class="home-container">
<div class="home-row">
<div class="some-other-class">
<p>text that should be in the middle</p>
</div>
</div>
</div>
</body>
</html>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)