Środek na środku ekranu

Jaki jest najlepszy wzorzec do wyrównania semantycznej siatki ui na środku ekranu?Środek na środku ekranu

css za to idealnie będzie ten.

.div{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
}

Ale na semantycznym to nie wygląda dobrze z sieci.

To jest część mojego html.

<div class="ui grid container"> 
    <div class="ui center aligned three column grid"> 
     <div class="column"> 
     </div> 
     <div class="column"> 
     </div> 
     </div> 
    </div>

Źródło

2015-07-04 carloss medranoo

Chcesz, aby kolumny były poziomo i pionowo wyśrodkowane? –

Spróbuj tego:

div{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    background: red; 
}

Tutaj jest znacznik div html. Napisałeś znacznik HTML, a następnie kropkę, która jest błędna. Tylko klasa jest zapisywana, a następnie kropka.

Źródło

2015-07-04 05:40:22

Najlepszym sposobem na wyrównanie div w centrum zarówno poziomo jak i pionowo będzie

HTML

<div></div>

CSS:

div { 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
}

FIDDLE

Źródło

2015-07-04 05:47:48 Hemal

Twój kod jest poprawny po prostu stosować .div zamiast div

HTML

<div class="ui grid container"> 
<div class="ui center aligned three column grid"> 
    <div class="column"> 
    </div> 
    <div class="column"> 
    </div> 
    </div>

CSS

div{ 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -50px; 
width: 100px; 
height: 100px; 
}

Sprawdź tę Fiddle

Źródło

2015-07-04 07:51:29 Malik

To powinno działać na dowolnym rozmiarze div:

.center-screen { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    min-height: 100vh; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div class="center-screen"> 
 
I'm in the center 
 
</div> 
 
</body> 
 
</html>

Zobacz więcej szczegółów na temat flexhere.

Źródło

2017-12-30 02:14:28 Caner

Pracował jak urok. Dzięki. – Shashank

Środek na środku ekranu

Odpowiedz

Powiązane problemy