使用 Flexbox 使浮动元素垂直居中

LiangJ 发布于2019-08-29 13:03 / 2259人阅读

摘要：你需要这两列能够垂直居中。这意味着浮动元素总会被固定在顶部。关于的浏览器兼容性可以在查看得到使用使浮动元素垂直居中

垂直居中一直是一个很麻烦的问题，但基于 FlexBox 的垂直居中就非常简单了。

考虑下面的场景：

你正在使用网格布局的框架，比如 Bootstrap、Foundation、 Skeleton、Susy 等。

你有两个包含动态内容的列（每列都是一个盒模型），你并不知道每列的具体尺寸，也不知道哪个更高。

你需要这两列能够垂直居中。

我们希望得到的布局就像下面这样：

但默认情况下，这两列将会顶部对齐：

所以问题来了，在不改变浮动布局的前提下，我们应该如何是元素垂直居中对齐？到目前为止，这个简单的问题都非常难以解决。

是否可以使用 vertical-align:middle

很不幸，不能，因为一些不同的原因。

首先，在 MDN->CSS 中有关于 vertical-align 的描述 The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.。我们的元素不是 inline、inline-block 或 table-cells，所以在不改变 display 的情况下 vertical-align:middle 并不会生效。

其次，网格布局的框架使用了 float:right 来对我们的两列元素进行定位，在 W3C->CSS->9.5.1 Positioning the float: the "float" property 第八条有描述 A floating box must be placed as high as possible.。这意味着浮动元素总会被固定在顶部。

第一个问题我们可以通过将 display 改为 inline-block 或者 table-cell 解决，但没有 CSS 技术可以解决第二个问题。我们需要移除浮动规则，但这会破坏基于网格布局的框架的基础。

使用 Flexbox 解决问题

像往常一样，Flexbox 对我们的问题有一个简单的解决方案。只需要简单的两步就行了：

为元素添加 display: flex 规则。

为对元素添加 ‘align-items: center 规则。

这样就可以了！下面是一个简单的 HTML 和 CSS 例子：


 [Dynamic content]
 [Dynamic content]

.container {
  display: flex;
  align-items: center;
}

.column-1,
.column-2 {
  float: left;
  width: 50%;
}

See the Pen RZWYZX by Hang Jiang (@nodejh) on CodePen.

这种解决方法最好的一点是通过添加两个规则，在没有对两列元素的原本样式做任何修改的前提下就实现了垂直居中对齐。现在大部分浏览器都支持 flex，老的浏览器会忽略该规则，元素将保持顶部对齐。

关于 flexbox 的浏览器兼容性可以在 Can I Use Flexbox 查看得到：

使用 Flexbox 使浮动元素垂直居中

GPU云服务器云服务器 html使文字垂直居中 html居中浮动元素垂直居中实现垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112338.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果没有接...

laznrbfe 2019-08-29 13:45 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0