Align div in center

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