Center Image and Text

.absolute-center {
    position: absolute;
    overflow: auto; /* Recommended in case content is larger than the container */
    margin: auto; /* this is essential */
    top: 0; left: 0; bottom: 0; right: 0; /* this is essential */
}

<!DOCTYPE html>
<html>
<head>
<style>

#myimage
{
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid green;

    background-image:url('grass.jpg');
    background-repeat:no-repeat;
    background-size: 100% 100%;

    /*center text*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.absolute-center {
    position: absolute;
    overflow: auto; /* Recommended in case content is larger than the container */
    margin: auto; /* this is essential */
    top: 0; left: 0; bottom: 0; right: 0; /* this is essential */
    color : red;
}

</style>
</head>

<body>

<div class="absolute-center" id="myimage">아름다운 우리나라, 우리의 소원은 통일</div>

</body>
</html>