html - imagen - centrar texto horizontalmente css

Alineación vertical de un div utilizando la interfaz de usuario semántica

Question

Parece que no puedo encontrarlo en ningún lugar en los documentos.

¿Hay una manera de centrar verticalmente un div en la página usando semántica de interfaz de usuario semántica :)

Esto es lo que estoy tratando de hacer:

<div class="ui centered grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>

Answer 1

Acabo de lograr esto usando las alturas middle y determinadas para ciertos elementos:

.holder {
height: 400px
}
.holder .middle {
height: 100%
}

<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />
<div class="holder">
<div class="ui middle aligned grid">
<div class="eight column wide">
<div>I want to be centered vertically on a page</div>
</div>
</div>
</div>

Answer 2

Este problema se informó HERE principios de 2018, pero se cerró.

Sin embargo, puedes probar esto:

<div id="my-container" class="ui grid middle aligned">
<div class="row">
<div class="column">
<div class="ui text container segment inverted">
<h1>My DIV</h1>
</div>
</div>
</div>
</div>

Asegúrate de que tu contenedor sea lo suficientemente alto

#my-container {
background: #000;
height: 100vh;
width: 100%;
}

Pruébelo en JSFiddle: https://jsfiddle.net/Peyothe/6rjmdu1x/

Answer 3

http://semantic-ui.com/examples/grid.html

Use la middle aligned en la grid