這將是垂直居中在限定的寬度/高度的任何內容的正確方法div。在示例中，有兩個具有不同高度的內容，什么是使用class垂直居中的最佳方法是什么.content？（并且適用于所有瀏覽器，而沒有的解決方案table-cell）想到了一些解決方案，但想知道其他想法，一個正在使用position:absolute; top:0; bottom: 0;和margin auto。
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 關注
- 549 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消