Html 在动态高度和宽度父对象内居中放置图元 A

想象上面是一个键盘按钮。挑战在于div的宽度和高度都是动态的，因为我希望它能做出反应。那么，如何使跨度居中？我可以做

position:relative

并使用top将其调整到中心位置，但由于宽度和高度是动态的，所以我无法做到这一点。

以下是我执行过多次的技巧：

<div><span>A</span></div>

请注意，您可能需要在

transform

上添加

-webkit-

或其他供应商前缀，才能在某些旧浏览器上工作

---

这是因为

left

和

top

百分比值相对于父元素，而

transform

相对于所选元素本身。

可以使用表格和表格单元格，然后使用文本居中对齐和垂直居中对齐

div {
    position: relative;
}
div span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div{
显示：表格；
高度：100px；
宽度：150px；
背景色：红色；
}
跨度{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
A.

您可以使用CSS Flexbox布局功能，只需添加：

div {
    display: table;
    height: 100px;
    width: 150px;
    background-color: red;
}
span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

<div><span>A</span></div>

运行演示

div{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.边界{
边框：1px实心#ccc；
}
.h1{
高度：100px；
宽度：100px；
}
.h2{
高度：200px；
宽度：200px；
}

A
A

您试过这个吗？我的例子中，跨度一直向下到右边。@MaySun等一下，我正在用小提琴。@MaySun回答已编辑，似乎这只能在绝对位置元素上完成。你也可以用表格来尝试新的答案。但我个人不喜欢使用

display:table

。

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