Question

假设我div width: 300px和height: 200px为div 我希望这个div内的任何图像都可以水平和垂直居中，无论图像是大于还是小于margin: 0 auto;

对于较小的图像height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);效果很好，但较高的图像向右突出并且不居中。

对于更大的图像，这可行：

# -*- coding: utf-8 -*-

import pyqtgraph as pg
from pyqtgraph.Qt import QtCore, QtGui
import numpy as np
import random

# Enable antialiasing for prettier plots
pg.setConfigOptions(antialias=True)

w = pg.GraphicsWindow()
w.setWindowTitle('pyqtgraph example: CustomGraphItem')
v = w.addViewBox()
v.setAspectLocked()


class Graph(pg.GraphItem):
    def __init__(self):
        self.dragPoint = None
        self.dragOffset = None
        self.textItems = []
        pg.GraphItem.__init__(self)
        self.scatter.sigClicked.connect(self.clicked)

    def setData(self, **kwds):
        self.text = kwds.pop('text', [])
        self.data = kwds
        if 'pos' in self.data:
            npts = self.data['pos'].shape[0]
            self.data['data'] = np.empty(npts, dtype=[('index', int)])
            self.data['data']['index'] = np.arange(npts)
        self.setTexts(self.text)
        self.updateGraph()

    def setTexts(self, text):
        for i in self.textItems:
            i.scene().removeItem(i)
        self.textItems = []
        for t in text:
            item = pg.TextItem(t)
            self.textItems.append(item)
            item.setParentItem(self)

    def updateGraph(self):
        pg.GraphItem.setData(self, **self.data)
        for i, item in enumerate(self.textItems):
            item.setPos(*self.data['pos'][i])

    def mouseDragEvent(self, ev):
        if ev.button() != QtCore.Qt.LeftButton:
            ev.ignore()
            return

        if ev.isStart():
            # We are already one step into the drag.
            # Find the point(s) at the mouse cursor when the button was first
            # pressed:
            pos = ev.buttonDownPos()
            pts = self.scatter.pointsAt(pos)
            if len(pts) == 0:
                ev.ignore()
                return
            self.dragPoint = pts[0]
            ind = pts[0].data()[0]
            self.dragOffset = self.data['pos'][ind] - pos
        elif ev.isFinish():
            self.dragPoint = None
            return
        else:
            if self.dragPoint is None:
                ev.ignore()
                return

        ind = self.dragPoint.data()[0]
        self.data['pos'][ind] = ev.pos() + self.dragOffset
        self.updateGraph()
        ev.accept()

    def clicked(self, pts):
        print("clicked: %s" % pts)


g = Graph()
v.addItem(g)

pos = np.array([]).reshape(0, 2)
adj = np.array([]).reshape(0, 2)
symbols = []
symbols2 = []


data_adj= np.array([
    [2, 4],
    [2, 0],
    [1, 3],
    [3, 0],
    [1, 0],
    [1, 5]
])

zero_lines = np.array([
    (0, 0, 0, 255, 1),
    (0, 0, 0, 255, 2),
    (0, 0, 0, 255, 3),
    (0, 0, 0, 255, 2),
    (0, 0, 0, 255, 1),
    (0, 0, 0, 255, 8),
], dtype=[('red', np.ubyte), ('green', np.ubyte), ('blue', np.ubyte), ('alpha', np.ubyte), ('width', float)])

color_lines = np.array([
    (255, 0, 0, 255, 5),
    (0, 255, 0, 255, 1),
    (0, 0, 255, 255, 2),
    (255, 0, 0, 255, 3),
], dtype=[('red', np.ubyte), ('green', np.ubyte), ('blue', np.ubyte), ('alpha', np.ubyte), ('width', float)])


data_pos = np.array([
    [5, 10],
    [3, 8],
    [8, 8],
    [10, 10],
    [-5, 0],
    [6, 5],
], dtype=float)

data_texts = ["Point %d" % i for i in range(6)]

data_symbols = ['o', 'o', 'o', 'o', 't', '+']


def update():
    global data_pos, data_adj, zero_lines, color_lines
    zero_lines = np.delete(zero_lines, 0, 0)

    zero_lines = np.append(zero_lines, color_lines[random.randint(0, len(color_lines) - 1)])

    g.setData(pos=data_pos, adj=data_adj, pen=zero_lines, size=1, symbol=data_symbols, pxMode=False, text=data_texts)




timer = QtCore.QTimer()
timer.timeout.connect(update)
timer.start(1000)

# Start Qt event loop unless running in interactive mode or using pyside.
if __name__ == '__main__':
    import sys

    if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):
        QtGui.QApplication.instance().exec_()

我找不到这些的任何组合，并没有找到任何解决方案如何完美地居中这个图像。

Answer 1

将position: absolute添加到img，将position: relative添加到div

.el {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 50px 150px;
}
img {
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

<div class="el">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/50x50/000000/ffffff">
</div>

Answer 2

试试这个

div{
  display: flex;
  align-items: center;
  justify-content: center
}

CSS将任何图像放在div中

2 个答案: