中心位置：固定元素我想position: fixed;以一個(gè)動(dòng)態(tài)寬度和高度制作一個(gè)以屏幕為中心的彈出框。我用過(guò)margin: 5% auto;這個(gè)。沒有position: fixed;它水平中心，但不垂直。添加后position: fixed;，它甚至不會(huì)水平居中。這是完整的集合：.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.</div>如何使用CSS將此框置于屏幕中心？
3 回答
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
我想制作一個(gè)以動(dòng)態(tài)寬度和高度為中心的彈出框。
這是一種現(xiàn)代方法，用于水平居中具有動(dòng)態(tài)寬度的元素 - 它適用于所有現(xiàn)代瀏覽器; 支持可以在這里看到。
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);}對(duì)于垂直和水平居中，您可以使用以下內(nèi)容：
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);}您可能還希望添加更多供應(yīng)商前綴屬性（請(qǐng)參閱示例）。
添加回答
舉報(bào)
0/150
提交
取消