how can i center my one div with another in the center?


Im trying to align my .content with .img-area but somehow i cant align those 2.
this is my 2nd day on css.
If i set margin-left: auto; to margin-left: 30%; it aligns right in the center but if i change the resolution of the website everything is moving with the center but my .img-area, i want my .img-area position to be responsive to the resolution of the website.
(sry for my bad english)

.content
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
    font-weight: bold;


.img-area
    display:block;
    margin-left: auto;
    margin-right: auto;
    width:300px;
    height:250px;
    border-radius: 5px;
    text-align: center;
    border:1px solid red;



Source link

Leave a Reply

Your email address will not be published.

Previous Article

Gavi 'won't renew Barcelona contract' if Bernardo Silva joins

Next Article

Barcelona closing in on deal to sign Chelsea defender Marcos Alonso

Related Posts