【今日新发现】让子元素上下左右居中的新奇方法
邵预鸿 Lv5
 2021-02-21 12:37:49   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<style>
 *{
 margin:0;
 padding:0;
 }
 #app{
  background-color:#ddd;
  height:600px;
  position:relative;
 }
 #app div{
  width:100px;
  height:100px;
  background-color:red;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
 }
</style>
<body>

<div id="app">
  <div>111</div>
</div>

</body>
</html>

【注意】需要注意的是，此方法只对子元素有宽高的情况起作用，如果没有宽高则不起作用。
  • 本文标题：【今日新发现】让子元素上下左右居中的新奇方法
  • 本文作者：邵预鸿
  • 创建时间：2021-02-21 12:37:49
  • 本文链接：/images/logo.jpg2021/02/21/【今日新发现】让子元素上下左右居中的新奇方法/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！