如何在HTML和CSS中创建一个对话框，在保持居中的同时自动缩小？

我的目标是创建一个对话框，该对话框在移动设备上自动缩小，占据80%的屏幕空间，但在台式机或大型平板电脑上最大化为750px x 500px。下面是一段代码片段（我建议您点击整个页面）：

/*只是一些造型，让东西看起来很漂亮*/
身体{
背景：珊瑚；
保证金：0；
}
div{
背景：4f00ff；
颜色：白色；
字体系列：无衬线；
填充：10px；
}
/*问题焦点代码*/
div{
位置：绝对位置；
宽度：最小（750px，80vw）；
高度：最小（500px，80vh）；
}

对话

使用最大宽度和类似的媒体查询，这是可能的。而且，填充物弄乱了它

/*只是一些造型，让东西看起来很漂亮*/
身体{
背景：珊瑚；
保证金：0；
}
div{
背景：4f00ff；
颜色：白色；
字体系列：无衬线；
}
/*问题焦点代码*/
div{
位置：绝对位置；
宽度：80vw；
高度：80vh；
左：10vw；
顶部：10vh；
}
@介质（最小宽度：800px）{
div{
宽度：750px；
左：计算（（100vw-750px）/2）；
}
}
@介质（最小高度：550px）{
div{
高度：500px；
顶部：计算（（100vh-500px）/2）；
}
}

对话

使用最大宽度和类似的媒体查询，这是可能的。而且，填充物弄乱了它

/*只是一些造型，让东西看起来很漂亮*/
身体{
背景：珊瑚；
保证金：0；
}
div{
背景：4f00ff；
颜色：白色；
字体系列：无衬线；
}
/*问题焦点代码*/
div{
位置：绝对位置；
宽度：80vw；
高度：80vh；
左：10vw；
顶部：10vh；
}
@介质（最小宽度：800px）{
div{
宽度：750px；
左：计算（（100vw-750px）/2）；
}
}
@介质（最小高度：550px）{
div{
高度：500px；
顶部：计算（（100vh-500px）/2）；
}
}

对话

有两种方法可以做到这一点。为了专门针对div，我为div分配了一个类“dialog”

保证金：0自动

/*只是一些造型，让东西看起来很漂亮*/
身体{
背景：珊瑚；
保证金：0；
}
.对话{
保证金：0自动；
宽度：最小（750px，80vw）；
高度：最小（500px，80vh）；
背景：4f00ff；
颜色：白色；
字体系列：无衬线；
}

对话

有两种方法可以做到这一点。为了专门针对div，我为div分配了一个类“dialog”

保证金：0自动

/*只是一些造型，让东西看起来很漂亮*/
身体{
背景：珊瑚；
保证金：0；
}
.对话{
保证金：0自动；
宽度：最小（750px，80vw）；
高度：最小（500px，80vh）；
背景：4f00ff；
颜色：白色；
字体系列：无衬线；
}

对话

根据我对你问题的理解，你可以这样做。确保在html中添加meta标记

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：珊瑚；
高度：100vh；
}
div{
背景：4f00ff；
宽度：750px；
高度：500px；
颜色：白色；
字体系列：无衬线；
填充：10px；
}
@介质和全部（最大宽度：800px）{
div{
宽度：80vw；
高度：80vh；
}
}

对话

根据我对你问题的理解，你可以这样做。确保在html中添加meta标记

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：珊瑚；
高度：100vh；
}
div{
背景：4f00ff；
宽度：750px；
高度：500px；
颜色：白色；
字体系列：无衬线；
填充：10px；
}
@介质和全部（最大宽度：800px）{
div{
宽度：80vw；
高度：80vh；
}
}

对话

只需使用媒体查询即可。那么，我应该把它作为一个答案吗？对于一个anwser来说是不具体的。除此之外，这实际上取决于你想具体做什么。另一种实现方法是结合使用od媒体查询和

auto-fit/1fr

或

minmax

sizingget。那么，我将开始尝试如何使用媒体查询。为了澄清，您是要将容器、文本或两者都放在中心位置？只需使用媒体查询即可。那么，我应该把它作为一个答案吗？对于一个anwser来说是不具体的。除此之外，这实际上取决于你想具体做什么。另一种实现方法是结合使用od媒体查询和

auto-fit/1fr

或

minmax

sizingget。那么，我将开始尝试如何使用媒体查询。为了澄清，您是要将容器、文本或两者居中？效果很好，但它不是垂直居中的。有没有办法做到这一点？使用flex，您可以通过添加另一个属性“align items:center”来做到这一点。我不确定您是否希望它垂直对齐，所以我没有包括该部分。在这种情况下，您可能还必须将您的身体（或目标div的父级）高度设置为100vh，以使其位于屏幕中央。祝你一切顺利！效果很好，只是它没有垂直居中。有没有办法做到这一点？使用flex，您可以通过添加另一个属性“align items:center”来做到这一点。我不确定您是否希望它垂直对齐，所以我没有包括该部分。在这种情况下，您可能还必须将您的身体（或目标div的父级）高度设置为100vh，以使其位于屏幕中央。祝你一切顺利！看起来不错。这是否意味着现在我的整个页面都需要flexbox？有了这些代码，是的，但您可以在内部容器中始终使用网格。Flex非常适合于移动和桌面支持，并使一切都以中心为中心。我通常在页面中使用带有列方向的flex，如果需要，可以将内部容器的显示更改为网格或flex方向行。这里有一个关于flex的好资源：刚刚完成了将我的（WIP）站点转换为使用flex。谢谢看起来不错。这是m吗