怎么让一个div 垂直程度居中
代码片段
// HTML<div class="parent"> <div class="child"></div></div>相对定位
.parent{ position:relative;}// 第一种.child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}// 第二种（须要固定宽高）.child{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin-left:-50px; margin-top:-50px;}// 第三种（须要固定宽高）.child{ position:absolute; width:100px; height:100px; left:0; top:0; bottom:0; right:0; margin:auto;}// 第四中（固定宽高 + transform变形）.child{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; background: yellow; transform: translate(-50px, -50px);}flex布局
.parent { width: 500px; height: 500px; background: pink; display: flex; align-items: center; justify-content: center;}// 子元素能够固定宽高.parent. child { width: 100px; height: 100px; background: yellow;}// 子元素不设置宽高.parent. child { background: yellow;}table-cell
.parent { width: 500px; height: 500px; display: table-cell; text-align: center; vertical-align: middle; background: pink;}.parent .child { display: inline-table; /* // 这种写法也能够 display: inline-block; display: inline; */ width: 100px; height: 100px; background: yellow;}Grid
.parent { width: 500px; height: 500px; display: grid; background: pink;}.parent .child { align-self: center; justify-self: center; width: 100px; height: 100px; background: yellow;}Demo
总结
让一个div垂直程度居中有两种状况，第一种是元素不固定宽高的，有三种形式
- 应用相对定位加transform偏移
- 应用flex布局，设置align-items:center;justify-content:center;
- 应用grid布局，设置align-self:center; justify-self:center;
如果元素有固定宽高，能够应用：
- 相对定位+transform偏移
- 相对定位+负margin值
- 相对定位+margin:auto
- 不固定宽高的三种形式
参考
前端进阶