如何在 div 中垂直居中 HR 標簽，我試過了，但它沒有完美居中
.container {
position: relative;
width: 80vw;
height: 40vh;
border: solid 4px #333;
}
hr {
height: 5px;
background-color: cadetblue;
position: absolute;
right: 0;
top: 50%;
left: 0;
transform: translateY(-100%);
}<div class="container">
<hr>
</div>uj5u.com熱心網友回復：
更大的問題是您需要margin從hr
此外，您可以通過將 a 更改translate為 atop:calc并洗掉bottom
.container {
position: relative;
width: 80vw;
height: 40vh;
border: solid 4px #333;
}
hr {
height: 4px;
margin:0;
background-color: cadetblue;
position: absolute;
right: 0;
top: calc(50% - 2px);
left: 0;
}<div class="container">
<hr>
</div>uj5u.com熱心網友回復：
更改并添加transform到：translateY(-50%);margin: 0;hr
（順便說一句：如果您有定義，則不需要top 和 設定，擁有其中一個就足夠了）bottomheight
.container {
position: relative;
width: 80vw;
height: 40vh;
border: solid 4px #333;
}
hr {
height: 5px;
background-color: cadetblue;
position: absolute;
right: 0;
top: 50%;
left: 0;
transform: translateY(-50%);
margin: 0;
}<div class="container">
<hr>
</div>uj5u.com熱心網友回復：
無需transform在 css 中使用。
.container {
position: relative;
width: 99%;
height: 50vh;
border: solid 4px #333;
}
hr {
height: 5px;
background-color: blue;
position: absolute;
right: 0;
left: 0;
top: calc(50% - 5px);
margin: 0;
}<div class="container">
<hr>
</div>在頂級課程中定義您的hr身高
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527472.html
標籤：htmlcss
上一篇：棋盤式布局CSSJS
下一篇：如何使用js修復倒置的影像位置