How to center an element within a parent div vertically

Question

I want to center below wrapper inside the parent div element with a height equal to windows view height, using CSS.

HTML

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

CSS

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
left: 0px;
right: 0px;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

Please help me guys, thanks.

@bellabelle Hi, try this way: https://jsfiddle.net/dh0o82g6/ with positioning && with flexbox: https://jsfiddle.net/dh0o82g6/1/ — Tsurule Vol, Sep 20 '17 at 08:40
Instead of using px in your positioning , try using `%` works perfect with different screens. — bhansa, Sep 20 '17 at 16:41

Victor Allegret · Answer 1 · 2017-09-20T07:34:45.150

2

With flexbox :

.main-header{
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  height: 100vh;
  position: relative;
  /* Flexbox */
  display: flex;
  align-items: center; 
}

.wrapper{
  /* your wrapper style */
}

With absolute position :

.main-header{
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  height: 100vh;
  position: relative; 
}

.wrapper{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

edited Sep 20 '17 at 07:34

answered Sep 20 '17 at 07:30

Victor Allegret

2,344
3
18
31

the result is not – bellabelle Sep 20 '17 at 07:33
1

Sorry, you're right with your answer, display flex then align-items center – bellabelle Sep 20 '17 at 07:39

Naren Murali · Answer 2 · 2017-09-20T07:38:57.750

1

Do you want something like this?

The changes:

html and body element should be set to height of the window(viewport), so I used the property height:100vh, then body by default has the margin set to 8px, so I used the property margin:0px.
To center the div inside you just need to use, text-align: center for the div with class main-header.

html,
body {
  height: 100vh;
  margin: 0px;
}

.main-header {
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  box-sizing: border-box;
  height: 100vh;
  position: relative;
  text-align: center;
}

.wrapper {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

<div class="main-header">
  <div class="wrapper">center div</div>
</div>

edited Sep 20 '17 at 07:38

answered Sep 20 '17 at 07:30

Naren Murali

19,250
3
27
54

no, i want to center the wrapper element vertically – bellabelle Sep 20 '17 at 07:32
@bellabelle can you check my answer now? – Naren Murali Sep 20 '17 at 07:39

bhansa · Answer 3 · 2017-09-20T07:39:30.583

Check this: Added top:46% and left:46%, you can also do it other way around.

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
top:46%;
left: 46%;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

score 0 · Answer 4 · answered Sep 20 '17 at 07:35

You just have to add top: 0; bottom: 0 to your .wrapper like this:

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
left: 0px;
right: 0px;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
text-align: center;
top: 0;
bottom: 0;
}

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

You can also check this Fiddle

score 0 · Answer 5 · answered Sep 20 '17 at 07:37

Just give display: table to parent and display: table-cell; vertival-align: middle; to child that will work for you.

Working example.

<!DOCTYPE html>
<html>

<head>
    <style>
        .main-header {
            color: #fff;
            background: #16a8ec;
            padding: 10px;
            height: 100vh;
            width: 100%;
            display: table;
        }
        
        .wrapper {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="main-header">
        <div class="wrapper">center div</div>
    </div>
</body>

</html>

How to center an element within a parent div vertically

5 Answers5