CSS 幾種常用的水平垂直居中對齊方法 [Toc] 文字的水平垂直居中 元素的水平垂直居中 1 使用絕對定位 2 使用絕對定位+ calc() 3. 使用絕對定位+transform 4. 使用display:flex; ...
目錄
CSS--幾種常用的水平垂直居中對齊方法
文字的水平垂直居中
text-align: center;
line-height: 單前元素高度;
元素的水平垂直居中
1 使用絕對定位
/* 需要固定寬高 */
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
width: xxx;
height: xxx
margin: auto;
2 使用絕對定位+ calc()
/* 需要知道具體的元素寬高值 */
position: absolute;
width: xxx;
height: xxx;
top: calc(50% - xxx/2);
left: calc(50% - xxx/2)
3. 使用絕對定位+transform
/* 不需要知道元素的寬高 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
4. 使用display:flex;
display: flex;
justify-content: center;
align-items: center;