-2

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>
Jayamurugan
  • 1,757
  • 2
  • 14
  • 34
  • 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 G 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

6 Answers6

2

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;
}
Robert Hovhannisyan
  • 2,938
  • 6
  • 21
  • 43
1

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;
}
<!-- parent has 500px height -->
<div class="parent">
    <!-- child has 200px height -->    
    <div class="child"></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%;
}
<!-- parent has 500px height -->
<div class="parent">
    <!-- child has 200px height -->
    <div class="child"></div>
</div>
xmaster
  • 1,042
  • 7
  • 20
1

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....

Francis G
  • 1,040
  • 1
  • 7
  • 21
1

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>
Sumit Kumar
  • 493
  • 2
  • 5
  • 16
0

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>
Aditya Thakur
  • 2,562
  • 2
  • 10
  • 21
0

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>
Saravana
  • 3,389
  • 4
  • 21
  • 37