如何在Bootstrap 4中垂直居中div？[副本]
我做错了什么？
共有1个答案
如果要垂直居中，则将html和主体的高度和宽度设置为100%。将width和height设置为100%会使元素具有其父元素的高度。
接下来，相应地设置所有子元素。在引导程序中宽度:100%是W-100，高度:100%是H-100。此外，bootstrap使用12列布局，因此将类从col-MD-4更改为col-MD-6
注意：您可以将w-100和h-100添加到代码中的html和body中，以达到相同的效果。
<style>
html,body{
width:100%;
margin:0;
height:100%;
}
</style>
<div class="container w-100 h-100">
<div class="row align-items-center h-100">
<div class="col-md-6">
<h1 class="alert alert-primary">Vertical</h1>
</div>
<div class="col-md-6">
<h1 class="alert alert-success">Vertical</h1>
</div>
</div>
</div>
-
问题内容： 我正在尝试制作一个小的用户名和密码输入框。 我想问一下，如何垂直对齐div？ 我所拥有的是： 如何使ID为Username和Form的div垂直对齐中心？我试着把： 在CSS中用于ID为Login的div，但似乎不起作用。任何帮助，将不胜感激。 问题答案： 现代浏览器中最好的方法是使用flexbox： 某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器（例如IE9及更低
-
问题内容： 编码： 如现在所呈现的，跨度与div的左下角对齐。 问题答案： 请参阅我关于理解垂直对齐的文章。在讨论的最后，有多种技术可以实现您想要的。 （超简短摘要：或者将子级的行高设置为等于容器的高度，或者将子级的高度设置为在容器上并将子级绝对定位为，其中YYY为子级已知高度的一半。）
-
我试图垂直（和水平）中心div（高度和宽度未知）在引导列。我可以水平中心的div设置文本对齐到中心。然而，我正在努力垂直居中的div。下面是我的代码片段： 提前感谢！
-
问题内容： 我有这样的标记： div高于img： 我需要将图像放置在div的中间（在其上下具有相同的空白）。 我试过了，它不起作用： 问题答案： 如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更语义化的解决方案。然后您可以指定背景的位置 如果它不是装饰性的并且构成有价值的信息，则img标签是合理的。在这种情况下，您需要使用以下属性设置包含div的样式：
-
本文向大家介绍如何垂直居中` `？相关面试题，主要包含被问及如何垂直居中` `？时的应答技巧和注意事项，需要的朋友参考一下 使用协助元素（这里是i），作为img的相邻元素，同为inline-block的两元素相邻时增加vertical-align: middle
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。