Issue
I want to align the element with the id content
both horizontally and vertically in the center. I already tried to use justify-content: center;
and align-items: center;
but both doesn't seem to work. I want to keep the absolute position because it will work as a popup window which should be displayed in the center.
#field {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#content {
width: 100px;
height: 50px;
margin: auto;
background-color: black;
}
<div id="field">
<div id="content">
</div>
</div>
Solution
justify-content
and align-items
are for flexbox. You have to use display: flexbox;
See example below:
#field {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100px;
height: 50px;
margin: auto;
background-color: black;
}
<div id="field">
<div id="content">
</div>
</div>
Updated Code with position: absolute;
:
You can keep position: absolute;
and still flexbox the container. See below example:
#field {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100px;
height: 50px;
background-color: black;
}
<div id="field">
<div id="content">
</div>
</div>
Answered By - JayDev95
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.