.text {
position: relative;
top: 50%;
left: 50%;
}
<a class="text">Hello</a>
MDN鏈接到規范。
仔細看看百分比長度在此上下文中的含義:
插入是相對于相應軸中包含塊的大小的百分比(例如,左側或右側的寬度,頂部和底部的高度)。對于粘性定位的框,插入是相對于相關的scrollport的大小。允許負值。
包含塊的高度是自動的(默認),當自動計算百分比時,得到0。
什么的50%?答案是父元素的50%。但是默認情況下,父元素的高度只能容納其中的內容。如果您將父元素的高度設置為完全填充頁面的垂直高度,您將看到該元素向下移動到該高度的50%,如下所示:
html, body {
height: 100%;
}
.text {
position: relative;
top: 50%;
left: 50%;
}
<a class="text">Hello</strong>
上一篇c# json解析數據
下一篇vue go 電商