I'm struggling to center the bottom div within a container that includes 3 other divs. Despite trying multiple solutions found online, nothing seems to work. This task should be simple, but for some reason, I can't get it right.
.container {
position: relative;
width: 968px;
margin: 0 auto;
text-align: center;
}
.text {
position: absolute;
width: 968px;
height: 100px;">
}
.bg_image {
position: absolute;
width: 968px;
height: 545px;
top: 150px;
background-image: url(x.jpg);
}
.bg_image2 {
position: absolute;
display: block;
width: 50%;
margin: 0 auto;
height: 200px;
top: 545px;
background-image: url(x.png);
background-repeat: no-repeat;
}