我怎样才能在这个 div 中居中这个图像？

Question

如何以不会移动“line”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>

Answer 1

这是防止它破坏容器的流布局的一种方法：

您可以将容器设置为相对位置，将图像设置为绝对位置，从顶部和左侧定位 50%，然后对其进行变换，使图像的中心位于中心位置。

您也可以只使图像成为 div 的背景图像，而不是使用图像元素，这可能更容易操作。

 .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

我不确定我是否了解您所期望的最终目标。 但是，如果我理解正确，您可以创建一个 flex 父级来证明图像的合理性，然后将线绝对定位在其中。 看 -

 .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

您可以将这些 css 用于 .square 和 .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

您可以使用 CSS 绝对位置轻松居中图像。 通过将方形黑色类的位置设置为“绝对”并应用于属性“顶部：45%；” 和“左：47%”。 通过应用这个，你的问题肯定会得到解决。

 .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>