新手從 HTML 和 CSS 的基礎開始。我真的很難將一個簡單的 div （在我的示例中為正方形）居中。我看了很多教程，也閱讀了很多文章，但仍然無法真正找出“最好”的方法。有這么多不同的方式，比如align-items, align-content, justify-items, justify-content，我有時會不知所措，尤其是這些方式在不同的顯示（flex、grid、inline-block 等）下的表現，更不用說父母和孩子的位置了。下面是一個我仍然不能很容易操縱/居中的例子。HTML 只是樣板檔案和square正文中帶有類的空白 div。提前感謝大家的提示！
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #162944;
}
.square {
height: 10rem;
width: 10rem;
background-color: salmon;
display: flex;
align-items:center;
justify-items: center;
align-content: center;
justify-content:center;
place-content: center;
place-items: center;
}
上面的例子已經嘗試了所有可能的組合，而不僅僅是你看到的。也與display:grid;和其他人。真的沒有一種簡單的方法可以讓您的頁面上的物件居中嗎？
uj5u.com熱心網友回復：
使 div 居中的一種方法是設定元素的寬度，然后使用 margin 屬性將左右邊距設定為 auto。這將使元素在其容器內水平居中。
例如：
.element {
width: 400px;
margin-left: auto;
margin-right: auto;
}
您也可以使用 text-align 屬性。
.shape {
text-align: center;
}
也可以使用 margin 屬性。
例如：
.shape {
margin: 0 auto;
}
最后，當涉及到形狀時，您可以使用 transform 屬性使 div 居中。
例如：
.shape {
transform: translate(50%, 50%);
}
uj5u.com熱心網友回復：
根據您的布局選項和您想要實作的目標，使 div 居中可以容易或困難。
將 div 水平居中的最簡單方法是添加 awidth和margin: 0 auto.
將 div 水平和垂直居中的最簡單方法是使用 flexbox display: flex; justify-content:center; align-items:center，. 您也可以使用display:tableand display:table-cell。
最后一個選項是使用Positioning. 您可以使用 div 設定樣式position:relative并添加height:300px, width:300px。然后在父 div 中，添加一個子 div 并使用position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/453203.html
上一篇：創建一個JavaScript程式來計算長方體的體積。顯示帶有完整描述的卷
下一篇：選擇被欄位集包圍