技術標籤：前端html佈局垂直居中水平居中

目錄

【效果】

【場景】

【簡單實現】

【程式碼】

【效果】

【場景】

div1能夠垂直和水平居中在固定高寬度裡顯示，div2能夠在div1後面的10px位置

【佈局描述】

• 父級div

有一個固定高寬度的父級div，比如：width=500px，height=80px，position:relative，相對定位佔據空間

• 子級div1

有一個固定高寬度的子級div1，比如：width=200px，height=20px，left=px，top=30px，position:absolute，絕對定位不佔據空間

• 子級div2

有一個固定高寬度的子級div2，比如：width=50px，height=10px，left=px，top=30px，position:absolute，絕對定位不佔據空間

【簡單實現】

水平居中公式：x軸=left值=div父級寬度/2(一半) -div1子級寬度/2(一半)=(div父級寬度-div1字級寬度)/2

垂直居中公式：y軸=top值=div父級高度/2(一半) -div1子級高度/2(一半)=(div父級寬度-div1字級寬度)/2

解釋：因為子級是以左上角作為定位父級的移動範圍，所以要考慮子級高寬度的問題

【程式碼】

<div style="width:500px;height:80px;background:#099dff;">
    <div style="width:200px;height:20px;position:absolute;top:30px;left:150px;background:#0ccdff;"></div>
<div style="width:50px;height:10px;position:absolute;top:35px;left:360px;background:#f60;"></div></div>