How can I center this image inside of this div?

Question

How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>

Answer 1

Here is one way to prevent it from disrupting the flow layout of your container:

you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.

You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.

 .black { background: black; } .square { position: relative; width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div> </div>

Answer 2

I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; } .image { height: 60px; width: 60px; } .line { width: 4px; background-color: red; position: absolute; left: 0; top: 0; bottom: 0 }

 <div class="square black"> <div class="line"></div> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> </div>

Answer 3

You can just use these css for .square and .image

        .square {
            width: 200px;
            height: 500px;
            margin: 37px auto;
            border-radius: 2px;

            position: relative;
        }

        .image {
            height: 60px;
            width: 60px;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

Answer 4

You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.

 .black { background: black; } .square { display: flex; align-item: center; justify-content: center; width: 200px; height: 500px; border-radius: 2px; } .image { height: 60px; width: 60px; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> </div> </div>

 .black { background: black; } .square { position: absolute; top: 45%; left: 47%; width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; position: absolute; top:50%; left:50%; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>

 .black { background: black; } .square { width: 200px; height: 500px; margin: 37px auto; border-radius: 2px; } .image { height: 60px; width: 60px; } .line { width: 4px; height: 500px; background-color: red; }

 <div class="container"> <div class="square black"> <img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg"> <div class="wrapper"> <div class="line"></div> <div class="rectangle"></div> </div> </div>