CSS Position child div in center

Question

The Height of parent and child will be given at run time, I have tried vertical-align but it didn't work, margin/top property won't be correct because height is dynamic. Please provide proper way to fix this.

Expected: Child should be center of parent. Width should remain same

Update: Solution of @xmastertje is working, but if i change my child height it breaks. This question is part of big problem so I can't use calc here. In real time I have nested elements each should center of its parent.

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
}

<div class="parent">
  Parent Has 500px Height
  <div class="child">
    child has 200px height
  </div>
</div>

Can you clarify your question...you want the child div to be positioned centered means the text or the entire div(since ,its width is 100%) — Rajesh Kumaran, May 06 '19 at 06:35
@Antguider I cannot understand why you can't use calc() function to determine the position of child? — Francis ask question, May 06 '19 at 06:58
@Francisaskquestion: If I have two child under parent calc fails. — Jayamurugan, May 06 '19 at 07:02
.child { height: var(--child-height); width:200px; background-color: goldenrod; position: absolute; margin:auto; left:0;right:0;bottom:0;top:0; } — enxaneta, May 06 '19 at 07:16

xmaster · Answer 1 · 2019-05-06T07:06:33.737

Use margin-top and position:absolute. With this you can fix it easy.

:root{
   --parent-height: 500px;
   --child-height: 200px;
  }
  
  html, body{
   width: 100%;
   height: 100%;
  }
  .parent{
   height: var(--parent-height);
   background-color: #bada55;
   position: relative;
  }
  .child{
   height: var(--child-height);
   background-color: goldenrod;
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -6em;
  }

<div class="parent">
  Parent Has 500px Height
  <div class="child">
   child has 200px height
  </div>
 </div>

EDIT

You have to use transform. This solution keeps working even if you change child or parent height.

:root{
   --parent-height: 500px;
   --child-height: 200px;
  }
  
  html, body{
   width: 100%;
   height: 100%;
  }
  .parent{
   height: var(--parent-height);
   background-color: #bada55;
   position: relative;
  }
  .child{
   height: var(--child-height);
   background-color: goldenrod;
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            width:100%;
  }

<div class="parent">
  Parent Has 500px Height
  <div class="child">
   child has 200px height
  </div>
 </div>

margin-top: -6em what it is doing here, if i change my child height this solution not working, try with 50px — Jayamurugan, May 06 '19 at 06:46

score 1 · Answer 2 · answered May 06 '19 at 06:41

If you just want the child to be centered and the width will be the same, you could use the margin-top with calc() to calculate the top margin of the child with the parent Something like this

margin-top: calc((var(--parent-height) - var(--child-height)) * 0.5);

Hope this help....

Robert Hovhannisyan · Accepted Answer · 2019-05-06T07:09:23.343

1

You can use flexbox for it like this:

 .parent {
   height: var(--parent-height);
   background-color: #bada55;
   position: relative;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

edited May 06 '19 at 07:09

answered May 06 '19 at 06:49

Robert Hovhannisyan

1,455
12
26

Sumit Kumar · Answer 4 · 2019-05-06T07:11:52.407

Hi i think the best way to do that is using table cell property.No matter what is the height of parent the child will be always align center.

But if you want the parent to be full width you can use flex properties.I Hope that will work fine.

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display: flex;
  justify-content: center; 
  align-items:center;
  width:100%;
   
 
   
  
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
}

<div class="parent">
  Parent Has 500px Height
  <div class="child">
    child has 200px height
  </div>
</div>

Aditya Thakur · Answer 5 · 2019-05-06T16:53:30.793

You can do it easily with flex box

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display: flex;
  justify-content:center;
  flex-direction: column;
  align-items: center;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
  
 width:100%;
}

<div class="parent">
  <p>Parent Has 500px Height</p>
    <br>
  <div class="child">
    <p>child has 200px height</p>
  </div>
</div>

score 0 · Answer 6 · answered May 06 '19 at 07:06

I have used the flexbox to make the child become center. Try the below code.

:root {
  --parent-height: 500px;
  --child-height: 200px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.parent {
  height: var(--parent-height);
  background-color: #bada55;
  position: relative;
  display:flex;
  display: -ms-flexbox!important;
  flex-wrap:wrap;
  -webkit-flex-wrap: wrap;
}

.child {
  height: var(--child-height);
  background-color: goldenrod;
  -ms-flex-align: center!important;
  align-items: center!important;
  width:100%;
}

<div class="parent">
  Parent Has 500px Height
  <div class="child">
    child has 200px height
  </div>
</div>

CSS Position child div in center

6 Answers6