Place div center of the page

Question

I am using semantic-ui and want to place the div in the middle of the page:

It's only place the div horizontally in the middle but I want vertically also.

The code:

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/semantic.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-3.3.1.min.js"></script>

</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="ui grid container">
    <div class="ui three column centered grid">
        <div class="teal column">1</div>
        <div class="yellow column">2</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script>
<script src="js/vendor/semantic-2.2.7.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

</body>
</html>

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Robin Mackenzie, Feb 06 '17 at 09:24

score 0 · Answer 1 · answered Feb 06 '17 at 09:25

0

To center a twelve wide div you can use:

<div class="ui one column stackable center aligned page grid">
   <div class="column twelve wide">
       Your stuff here
   </div>
</div>

note the "center" class, it will center the div.

You can place any div's inside this twelve (or w/e width you like) div to split it into different sizes.

answered Feb 06 '17 at 09:25

Rick van Lieshout

2,276
2
22
39

It does not place the div vertically in the middle. – softshipper Feb 06 '17 at 09:29

Yonas Hailu · Answer 2 · 2017-02-06T09:51:46.033

0

You can use flex box. Something below code.

html,body {
    height: 100%;
}
.ui.grid.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.ui.three {
        display: flex;
}

demo

edited Feb 06 '17 at 09:51

answered Feb 06 '17 at 09:35

Yonas Hailu

853
7
20

Ivin Raj · Answer 3 · 2017-02-06T09:54:14.420

try this one

body { 
    height:100%;
}

html { 
    height: 100%;
}
.ui.grid.container {
 display: flex;
 flex-direction: row;
 width: 100%;
 justify-content: center;
 align-items: center;
   
}
.ui.three {
     display: flex;
}
.teal
{
  background-color:green;
  width:200px;
  padding:10px;
}
.yellow
{
  background-color:yellow;
  width:200px;
  padding:10px;
}

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/semantic.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-3.3.1.min.js"></script>

</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div class="ui grid container">
    <div class="ui three column centered grid">
        <div class="teal column">1</div>
        <div class="yellow column">2</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script>
<script src="js/vendor/semantic-2.2.7.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

</body>
</html>

At least you can change class name orders, just you copy and paste my codes. — Yonas Hailu, Feb 06 '17 at 09:48

score 0 · Answer 4 · answered Feb 06 '17 at 09:53

0

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

answered Feb 06 '17 at 09:53

ZP Baloch

402
7
19

Can you please explain what your code a little bit ? – Sliq Feb 06 '17 at 10:58
`top:50%;` will give top margin of 50%. But div will not be placed in center because it will start form center. if we know height of div we can subtract that height form top margin. But if height is unknown we use `translateY()` CSS function.It moves the element vertically. `transform: translateY(-50%);` will place the div exactly in center. – ZP Baloch Feb 06 '17 at 12:23

Nitesh · Answer 5 · 2017-02-10T12:09:08.227

Add the following CSS to your code. It will display the div elements vertically centered.

.ui.grid.container {
    display: table-row;
    text-align: center;
}

.ui.three.column.centered.grid {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}
body{
  display: table;
    text-align: center;
    width: 100%;
}

Also attached is jsfiddle:- https://jsfiddle.net/niteshp27/og6Le59q/2/

Place div center of the page

5 Answers5