Центр в середине экрана

Что лучше всего подходит для выравнивания семантической сетки ui в середине экрана?Центр в середине экрана

css для этого будет идеальным быть этим.

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

Но по смыслу это не выглядит хорошо с сетками.

Это часть моего html.

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

источник

2015-07-04 carloss medranoo

Вы хотите, чтобы оба столбца были горизонтально и вертикально центрированы? –

Попробуйте это:

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

Здесь DIV является HTML тегов. Вы написали html-тег, за которым следует точка, которая неверна. Только класс написан, а затем точка.

источник

2015-07-04 05:40:22

Лучший способ выравнивания DIV в центре как по горизонтали, так и по вертикали будет

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

источник

2015-07-04 05:47:48 Hemal

Ваш код правильно вы просто использовали .div вместо 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; 
}

Заканчивать этот Fiddle

источник

2015-07-04 07:51:29 Malik

Это должно работать для любого 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>

Смотрите более подробную информацию о flexhere.

источник

2017-12-30 02:14:28 Caner

Работал как шарм. Благодарю. – Shashank

Центр в середине экрана

ответ

Смежные вопросы