3 回答
TA贡献1777条经验 获得超10个赞
我对此进行了一些研究,从中发现您有四个选择:
版本1:显示为表格单元的父div
如果您不介意display:table-cell在父div上使用,则可以使用以下选项:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
版本2:具有显示块和内容显示表单元的父div
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
版本3:父div浮动和内容div作为显示表格单元
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
版本4:父div位置与内容位置的相对位置
我使用此版本的唯一问题是,似乎必须为每个特定的实现创建css。原因是内容div需要具有您要填充的文本的设置高度,然后才能确定页边距。该问题可以在演示中看到。您可以通过更改内容div的高度百分比并将其乘以-.5来获得最高边距值,以使其手动适用于每种情况。
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
TA贡献1801条经验 获得超8个赞
这也可以display: flex仅使用几行代码来完成。这是一个例子:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
TA贡献1821条经验 获得超6个赞
我在本文中找到了这种解决方案
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
如果元素的高度不固定,则它就像一个吊饰。
- 3 回答
- 0 关注
- 519 浏览
相关问题推荐
添加回答
举报