對于網站的頁面布局,我們經常需要讓整個頁面居中顯示。而最常用的方法就是使用 CSS 樣式使 Body 元素居中。下面提供兩種常見的居中方法。
方法一:使用 CSS 定位和 Transform
body { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
其中,position: fixed; 定義了 Body 元素相對于瀏覽器窗口固定定位。Top 和 Left 屬性將 Body 元素向右、向下移動了元素寬高的一半,使其可以居中。Transform 屬性的 translate 函數被用來將 Body 元素向左和上移動了相應的一半寬高。
方法二:使用 Flexbox 布局
body { display: flex; justify-content: center; align-items: center; }
其中,display: flex; 屬性定義在 Body 元素上,使得包含 Body 的對象成為 Flexbox 容器。justify-content 屬性定義在容器上,居中 Body 元素,同時 align-items 屬性將 Body 元素垂直居中。
以上兩種 CSS 樣式使 Body 居中的方法都是增加一些額外的 CSS 屬性,方便進行自適應大小和響應式設計。你可以根據你的需求和喜好選擇其中一種方法來使你的網站完美居中。