html - 如何让div在body可视区域水平垂直居中？
这里不是说div里面的内容，水平垂直居中。
而是div这个容器在浏览器可视区域内水平垂直居中，并且div的高度宽度自适应，也就是说不能写死div的宽度高度，内容自适应。
以前有一种写法是绝对定位， 还要设置宽度高度，CSS3现在不是有弹性布局和网格布局吗，不知道能不能快速实现。
共有3个答案
你说的那种方式可能是这样，以前需要写具体的宽高，现在可以写成fit-content
.box{
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
- 父容器使用
position: fixed，上下左右都是0，填满视窗 - 然后
display:flex; justify-content: center; align-items: center，把子容器居中 - 最后字容器的宽高根据内容来调整。
大体上：
.parent {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.center {
width: fit-content;
height: fit-content;
}
方法一
使用flex布局
<body>
<div class="container">
<div class="content">这里是内容</div>
</div>
</body> html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.content {
width: auto;
max-width: 90%;
padding: 20px;
}方法二
使用定位
<body>
<div class="container">
<div class="content">这里是内容</div>
</div>
</body> html,
body {
height: 100%;
margin: 0;
}
.container {
position: relative;
height: 100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
padding: 20px;
}-
问题内容： 我弹出一个包含ASP.NET表单的弹出窗口，单击链接“请求信息”，然后出现该表单。 但是，具有链接“请求信息”以触发弹出窗口的页面包含很多内容，因此需要滚动才能看到该链接。 如果用户滚动阅读内容，则需要始终居中，否则，如果他们不滚动，弹出窗口仍将居中显示在屏幕上。 在绝对定位，整个页面宽度与边距设置为。 问题答案： 如果div具有固定的宽度和高度，请使用：（如果width = 120p
-
问题内容： 有没有办法在 垂直和水平方向上输入一个DIV， 但这很重要， 当窗口小于内容时，内容将不会被剪切 。div必须具有背景色，宽度和高度。 我总是将div的中心定位为绝对位置和负边距，如提供的示例所示。但是它有一个问题，那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题？ CSS： HTML： 我的问题不是重复的“如何在水平和垂直方向上居中放置元素？”1-
-
我有个问题快把我逼疯了。 我有一个包装器，其中包含一个带有一些文本的div和一个图像。图像和div的大小各不相同。包装器div将调整为较大包装器的大小。 它们都应该垂直对齐，如下所示： 我偶然发现了这个帖子： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 正如你在小提琴上看到的： http://jsfiddle.net
-
我在父div中的图标居中（垂直和水平）存在问题。我的页面上有许多大小不同的父div，因此我希望能够按比例将图标放置在每个父div的中心。下面是一个JSFIDLE问题： JSFIDLE公司 HTML CSS
-
问题内容： 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。 问题答案： 我认为您想要以下内容。 你的元素应该是块级（而非）如果你想要的高度和顶部/底部填充，以正常工作。 另外，在上，将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中，请为和分配100％的高度，然后将页边距清零。 请注意，需要一个高度才能看到垂直对齐效
-
如何使用FlexBox在容器内水平和垂直地居中div。在下面的例子中，我希望每一个数字在彼此下面（在行中），水平居中。 null null http://codepen.io/anon/pen/zlxbo