Question

在我的大多数网站上，我都将信息放入一个带有狐狸阴影的div中。我想知道是否有一种方法可以使此父div自动根据垂直和水平居中对齐，同时根据其子级更改其高度和宽度。以下是我所获得的，但div停留在页面的左上方。内容似乎很合适，但位置离我想要的位置不近。

.appRoundedShadow {
  display: inline-block;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
  background-color: white;
  padding: 25px;
  border-radius: 20px;
  border: 1px outset gray;
  box-shadow: 10px 10px 5px #888888;
}

我在flexbox上还没有成功。

Answer 1

使用flex很容易。您一定不能忘记的想法是：子级在父级高度上垂直居中。因此，您必须为作品设置一个最小值，否则父级的高度必须等于子级的高度（并且不需要将顶部/底部边距居中）

/* Normalize */
html, body { 
  padding: 0;
  margin: 0;
}
html {
  height: 100%; 
}
body {
  min-height: 100%;
  display: flex;
}
.appRoundedShadow {
  margin:auto;

  background-color: white;
  padding: 25px;
  border-radius: 20px;
  border: 1px outset gray;
  box-shadow: 10px 10px 5px #888888;
}

<div class="appRoundedShadow"></div>

Answer 2

flexbox应该是您的问题的解决方案，请详细了解CSS flexbox here

html,body{
  width:100%;
  height:100%;
  margin:0;
}
.appRoundedShadow {
display: inline-block;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;
}
.container{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="container">
<div class="appRoundedShadow">Some Text</div>
</div>

自动调整div大小

2 个答案: