Center div on the middle of screen

What is the best pattern to align a semantic ui grid in the middle of the screen?

the css for this will ideal be this one.

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

But on semantic this dont look well with grids.

This is part of my html.

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

259792 次浏览

小开

Try this:

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

Here div is html tag. You wrote a html tag followed by a dot that is wrong.Only a class is written followed by dot.

小开

The best way to align a div in center both horizontally and vertically will be

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

小开

Your code is correct you just used .div instead of 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;
}

Check out this Fiddle

小开

This should work with any div or screen size:

.center-screen {
display: flex;
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>

See more details about flex here. This should work on most of the browsers, see compatibility matrix here.

Update: If you don't want the scroll bar, make min-height smaller, for example min-height: 95vh;

小开

2018: CSS3

div {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

This is even shorter. For more information see this: CSS: Centering Things