Question

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

想象一下，上面是一个键盘按钮。挑战是div的宽度和高度是动态的，因为我希望它具有响应性。那么我怎样才能使跨度居中？我可以postion:relative并使用顶部将其调整到中心，但由于宽度和高度是动态的，我不能这样做。

Answer 1

这是我多次演绎的技巧：

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

请注意，您可能需要在-webkit-上添加transform或其他供应商前缀才能在某些较旧的浏览器上使用。

这是有效的，因为left和top百分比值是相对于父元素的，而transform是相对于所选元素本身。

Answer 2

您可以使用table和table-cell，然后使用text-align center和vertical-align middle。

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>

Answer 3

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

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

运行演示

＆＃13;

div{
     display:flex; 
     flex-direction: row; 
     flex-wrap: wrap; 
     align-items: center; 
     justify-content: center;
 }
.border{
    border:1px solid #ccc;
}
.h1{
    height:100px;
    width:100px;
}
.h2{
    height:200px;
    width:200px;
}

＆＃13;

<div class="border h1"><span>A</span></div>
<div class="border h2"><span>A</span></div>

＆＃13;

要修复浏览器之间的差距，您应该将浏览器的唯一前缀添加到属性名称中：

 div{
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     flex-direction: row; 
     flex-wrap: wrap; 
     align-items: center; 
     justify-content: center;
 }

将一个元素置于动态高度和宽度父级中

3 个答案:

见