首页 > 前端 > Flex实现水平竖直居中布局

Flex实现水平竖直居中布局

传统的布局使用的是“盒模型”加上display、position和float属性,但是对于一些特殊的布局实现例如居中却是比较麻烦,所以,为了解决一些复杂的布局问题,一种更为灵活的布局方式出现了,那就是Flex布局。

Flex 即为Flexible Box,指的是“弹性布局”,它可以为盒模型提供更加灵活的布局方式,例如,用flex可以优雅地实现水平竖直居中的布局。

在caniuse上可以查到各浏览器对flexbox的支持程度:

2016050213431943-1024x401

例如下面这个例子,我们想做的是让child元素在parent里面水平竖直居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

 

把parent的display设为flex,使其变成父容器父元素(flex container),然后把child的margin设为auto,这样child元素就可以在其父元素内水平竖直居中了,完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: flex;
            height: 400px;
            background-color: black;
        }

        .child {
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

页面实现的效果让子元素得以在父容器中居中:

2016050213540377

相关资源:

阮一峰的博客:Flex 布局教程

Segmentfault 上的文章:Flexbox简介

 


本文标题:Flex实现水平竖直居中布局
转载请注明出处,欢迎分享