CSS定位到屏幕中間是一個很實用的技巧,特別是在響應式設計中。以下是四種可行的方法。
第一種,使用絕對定位和top/left屬性:
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
第二種,使用相對定位和margin:auto:
.container { position: relative; margin: auto; top: 50%; transform: translateY(-50%); }
第三種,使用flexbox布局:
.parent { display: flex; align-items: center; justify-content: center; } .container { text-align: center; /* 如果內容不是一個塊級元素,需要加上這個 */ }
第四種,使用grid布局:
.parent { display: grid; place-items: center; }
以上四種方法都能實現將一個元素定位到屏幕中間,具體選擇哪一種取決于具體情況和個人偏好。
上一篇css定位 獲取文本信息
下一篇css定義文本屬性