Question

的孩子

transform: scale(0.544885);
transform-origin: center;

不会以父母为中心

https://codepen.io/rudza/pen/odLwYW

Answer 1

您可以display: flex使用parent

.parent {
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    display: flex; // Added
    align-items: center; // Added
    justify-content: center; // Added
}

或其他解决方案是text-align: center

parent

.parent {
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 50%;
        text-align: center; //Added
    }

Answer 2

将文本置于父级中心。

.parent {
  text-align: center; /* <--- here */
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
}

Answer 3

只需添加到儿童：

settings.py

Here is your codepen udpated

Answer 4

您可以向孩子添加'display：flex'

 .child {
    background-color: green;
   width: 420px;
  height: 478.9887640449438px;
  display: inline-block;
  transform: scale(0.544885);
  -webkit-transform: scale(0.544885);
  transform-origin: center;
  display: flex;}

变换：缩放偏移元素

4 个答案: