你的位置:首页 > 网页设计

[网页设计]Flexbox实现垂直水平居中


Flexbox(伸缩盒)是CSS3中新增的特性,利用这个属性可以解决页面中的居中问题。只需要3行代码就可以实现,不需要设置元素的尺寸,能够自适应页面。

这个方法只能在现代浏览器上有效,IE10+、chrome、Safari、Firefox。例如:

HTML:

首先,创建一个div容器,容器内是需要居中的内容

<div class="container">  <!--容器内的元素将会居中-->  <img src="fireworks.jpg" alt="fireworks"></div>

3行CSS代码:

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

note:

1.设置container的display的类型为flex,激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置

搞定。。。

 

更多阅读:

flexbox完全指南

Using_CSS_flexible_boxes

Flexbox in 5 minutes

The Simplest Way To Center Elements Vertically And Horizontally