如何垂直居中一个浮动的元素？
给浮动元素套一个父盒子与之大小一致然后使用绝对定位使其垂直居中
<style>
.fl {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
}
.father {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="father">
<div class="fl"></div>
</div>
-
本文向大家介绍如何实现元素的垂直居中？相关面试题，主要包含被问及如何实现元素的垂直居中？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 法一：父元素display:flex,align-items:center; 法二：元素绝对定位，top:50%，margin-top：-（高度/2） 法三：高度不确定用transform：translateY（-50%） 法四：父元素table布局，子元
-
本文向大家介绍如何垂直居中` `？相关面试题，主要包含被问及如何垂直居中` `？时的应答技巧和注意事项，需要的朋友参考一下 使用协助元素（这里是i），作为img的相邻元素，同为inline-block的两元素相邻时增加vertical-align: middle
-
问题内容： 我有两个要素并列。元素2小于元素1。两个元素都不具有固定的高度。我需要将元素2垂直居中。如何使用CSS做到这一点？ 编辑： 这是我到目前为止的内容： img1的高度将始终大于img2的高度。我希望img2垂直居中对齐。希望这可以澄清我要完成的工作。 问题答案： 最简单，最干净的方法是使用并垂直对齐。但是，IIRC（自从我开始浏览器兼容性问题以来已经有一段时间了）……也许某些普通版本的I
-
问题内容： 我正在尝试垂直居中放置两个元素。 我在phrogz.net上按照教程进行操作，但仍然将元素放置在div上方，div下方，在div中顶部对齐。 我会尝试其他方法，但是这里的大多数问题都只是指向该教程。 此代码段用于网页顶部的横幅。 问题答案： 添加以下内容：display：table; 到bannerRight 显示：表格单元格；和vertical-align：middle; 向bann
-
问题内容： 我试图将标签内容垂直居中，但是当我添加CSS样式时，水平文本对齐会消失。 如何为我的每个标签使文本对齐x和y？ 问题答案： 方法1- / ： 在受支持的浏览器（大多数）中，可以将/ 与组合使用， 以动态垂直/水平居中元素。 方法2-Flexbox方法： 在支持的浏览器中，将目标元素的设置为并用于垂直居中和水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。 方法3- / ： 在某些情
-
我正在尝试垂直居中我的选项卡内容，但是当我添加CSS样式时，水平文本对齐消失了。 我如何使文本对齐x和y为我的每个选项卡？ null null