谈谈flex布局实现水平垂直居中

咱们在这要谈的是用flex布局来实现水平和垂直居中。随着移动互联网的发展，对于网页布局来讲要求愈来愈高，而传统的布局方案对于实现特殊布局很是不方便，好比垂直居中。因此09年，W3C 提出了一种新的方案----Flex 布局，能够简便、完整、响应式地实现各类页面布局。
咱们想用flex布局居中的话就得先了解什么是flex布局，flex布局也叫弹性布局。就是可以实现一些特殊的布局方式。言归正传，flex布局首先就得对它的属性就好了解。flex布局包含了多种属性，其中flex布局须要在父元素中加上 display: flex；，在此咱们就先开始了解水平居中和垂直居中两种属性。其两种属性分别为： justify-content 、 align-items 而两种属性的取值也有多种。其中justify-content的取值分别为： flex-start（默认值，表示为起始位置对齐）、flex-end（表示为结束位置对齐）、 center （表示为水平居中对齐）、space-between（两端对齐）、space-around（环绕）、space-evenly（匀称）。举个实例：
首先咱们进行写一个没有加flex布局的页面，呈现的结果为：


加入flex布局以后如图：

用 display: flex;justify-content: center ;就能实现水平居中。
说完水平居中那咱们再来看一看垂直居中：其垂直居中的属性为 align-items 而align-items的取值则为：stretch（默认值，flex子项拉伸）、flex-start（表示为容器顶部对齐）、flex-end（表示为容器底部对齐）、center（表示为垂直居中对齐）。在没有用flex布局咱们只能把字体的行高设置为和容器的高同样大小，这样也能实现字体在容器里面实现垂直居中。这样虽然能购物实现垂直居中，可是却存在许多不足，好比 容器本生自适应了屏幕高，那么咱们的行高就不能这样去之写。因此咱们就要用到flex布局里面的align-items来实现垂直居中。举例：


display: flex;justify-content: center;align-items: center; 这样咱们就可以用flex布局来实现文字的水平居中和垂直居中。
这就是HTML语言编程的魅力，若是想快速提高本身，让本身也成为编程高手，详情请了解逆战班。

原文出处：https://www.cnblogs.com/ycs5/p/12380728.html