CSS Position child div in center [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
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>

Answer 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;
}

Answer 2

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

Answer 3

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>

Answer 4

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>

Answer 5

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>

Answer 6

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>