如何在 CSS 中设置组件在浏览器屏幕水平垂直居中
生活随笔
收集整理的這篇文章主要介紹了
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如何在 CSS 中設置組件在瀏覽器屏幕水平垂直居中
??在 CSS 中設置組件在瀏覽器屏幕水平垂直居中可分解為兩個問題，一是設置組件在其父組件的水平垂直居中，二是讓其父組件鋪滿整個屏幕。
??對于讓最外層組件鋪滿整個屏幕，這需要將其寬高均設置為 100%。不過這樣做了會導致瀏覽器出現水平和垂直的滑條。這是因為元素 body 會默認有一定的邊距 margin，一般為 8px，所以同時還要將元素 body 的邊距 margin 設為 0。
??對于讓組件在父組件中水平垂直居中，方法有很多，這里選擇 flex 布局。直接在父組件中設置 flex 布局和水平垂直居中即可。（注意：使用 flex 布局這種方法是在父組件中進行設置。）
示例代碼如下：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style type="text/css">body {/* 去掉邊距，這里為了去除鋪滿屏幕后瀏覽器橫豎兩邊的滑條 */margin: 0;}#outermost {/* 下面 3 行代碼設置涂滿整個屏幕 */height: 100%;width: 100%;position: absolute;/* 下面 3 行代碼設置子元素橫豎均居中 */display: flex;/*display: -webkit-flex;*//* 設置水平居中 */justify-content: center;/* 設置垂直居中 */align-items: center;background: #00ff0d;}.item {width: 50px;height: 40px;border: 1px solid #00c1b1;background: #ffffff;}</style> </head> <body> <div id="outermost"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div> </div> </body> </html>運行效果圖：
總結
以上是生活随笔為你收集整理的如何在 CSS 中设置组件在浏览器屏幕水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决 IntelliJ IDEA 中 .
- 下一篇： 如何使 React 中的 useEffe