前端 盒子水平垂直居中的五大方案

讓當前的盒子相對於其父級的容器來定位

首先要把父級元素的定位方式改為 relative

然後把當前盒子position設定為absolute，先把左上角固定在中間，然後向上和向下移動該盒子的一半

position

: absolute;
top: 50%;
left
: 50%;
margin-top
: -25px;
margin-left
: -50px;

方法的缺點：一定要知道當前盒子的寬和高，以此來計算調整位置後需要移動的距離

position

: absolute;
top: 0;
left
: 0;
right
: 0;
bottom
: 0;
margin
: auto;

方法的缺點：雖然不需要知道盒子的具體寬和高，但是這個盒子必須得有乙個固定的寬和高，不然就會被拉伸的很難看

position

: absolute;
top: 50%;
left
: 50%;
tranform
:translate
(-50%, -50%)
;

—以上三種方式核心都是基於定位來的—

display

: flex;
/* 設定為flex布局 */
justify-content
: center;
/* 設定為水平居中 */
align-items
: center;
/* 設定為垂直居中 */

獲得當前螢幕的寬和高，獲取盒子的寬和高，然後定位的時候用螢幕寬高減去盒子寬高再除以2.本質上還是基於定位來的，需設定body的position為relative，box的position為absolute。

lethtml
= document.documentelement,
winw =
html
.clientwidth,
winh =
html
.clientheight,
boxw = box.offsetwidth,
boxh = box.offsetheight;
box.style.position =
"absolute"
;        box.style.left =
(winw - boxw)/2
+'px'
;        box.style.top =
(winh - boxh)/2
+'px'
;<
/script>

移動端水平垂直居中 盒子垂直水平居中方案

盒子垂直水平居中的需求在專案中可以說是非常常見的，我在開發過程中常用的以下幾種方法 首先，做一下基礎的布局 定位利用絕對定位使得盒子在父容器中水平垂直居中，是簡單有效的方法，在實際開發中用的很多 container box 但是這種方法在子元素寬高不確定的情況下就不適用了。由於 css3 的出現，有...

針對盒子垂直水平居中的解決方案

盒子在視窗垂直水平居中有七種方法 第一種 利用負的margin來進行居中，需要知道固定寬高，限制比較大。body div nth of type 1 body div nth of type 1 div 第二種 利用絕對定位居中，非常常用的一種方法。body div nth of type 2 bo...

div盒子水平垂直居中的方法

這個問題比較老，方法比較多，各有優劣，著情使用。一 盒子沒有固定的寬和高 方案1 transforms 變形 這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform translate 50 50 必須加上 top 50 left 50 優點 1.內...