代码片断css
// 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); }
.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; }
.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; }
.parent { width: 500px; height: 500px; display: grid; background: pink; } .parent .child { align-self: center; justify-self: center; width: 100px; height: 100px; background: yellow; }
Demohtml
让一个div垂直水平居中有两种状况,第一种是元素不固定宽高的,有三种方式前端
若是元素有固定宽高,能够使用:git
前端进阶github