一些自适应居中布局方式 - 林晓峰

公告

记录一些自适应的居中布局方式：

一、水平居中

1.inline-block + text-align 在父级元素中用`text-alagn:center;`来居中,子元素中用`display:inline-block`来实现：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <style type="text/css">
            .parent {
                width: 200px;
                height: 50px;
                background: #999;
                text-align: center;
            }
            .child {
                display: inline-block;
                font-size: 30px;
                line-height:  50px;
                background: #666;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">demo</div>
        </div>
    </body>
    </html>

2.Table + margin 子元素中用`display:table`来实现宽度自适应，再利用`margin: *px auto`实现居中布局：

    <style type="text/css">
        .parent {
            width: 200px;
            height: 50px;
            background: #999;
        }
        .child {
            display: table;
            margin: 0 auto;
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

3.Absolute + transform 父级元素设置`position: relative;`确保定位基准，子级元素设置`position： absolute;left:50%;transform:translateX(-50%);`:

    <style type="text/css">
        .parent {
            position: relative;
            width: 200px;
            height: 50px;
            background: #999;
        }
        .child {
            position: absolute;
            left: 50%;
            font-size: 30px;
            line-height:  50px;
            background: #666;
            transform: translateX(-50%);
        }
    </style>

4.Flex + justify-content 利用最新的伸缩盒子的属性，在父级元素设置`display: flex;justify-content: center;`:

    <style type="text/css">
        .parent {
            display: flex;
            justify-content: center;
            width: 200px;
            height: 50px;
            background: #999;
        }
        .child {
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

二、垂直居中

1.table-cell + vertical-align 在父级元素设置`display:table-cell;vertical-align:middle;`:

    <style type="text/css">
        .parent {
            display: table-cell;
            vertical-align: middle;
            width: 50px;
            height: 200px;
            background: #999;
        }
        .child {
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

2.absolute + transform 原理和水平居中时候调用这两种属性一样：

    <style type="text/css">
        .parent {
            position: relative;
            width: 50px;
            height: 200px;
            background: #999;
        }
        .child {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

3.flex + align-items 在父级元素设置`display:flex;align-items:center;`:

    <style type="text/css">
        .parent {
            display: flex;
            align-items: center;
            width: 50px;
            height: 200px;
            background: #999;
        }
        .child {
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

三、水平+垂直居中

1.inline-block + text-align + table-cell + vertical-align 在父级元素中设置`display: table-cell;vertical-align: middle;text-align: center;`,在子元素中设置`display: inline-block;`：

    <style type="text/css">
        .parent {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 200px;
            height: 200px;
            background: #999;
        }
        .child {
            display: inline-block;
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

2.absolute + transform 在父级元素设置定位基准，如`position:relative;`，在子元素设置`position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);`

    <style type="text/css">
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: #999;
        }
        .child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

3.flex + jusify + align-items 在父级元素设置`display: flex;justify-content: center;align-items: center;`:

    <style type="text/css">
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: #999;
        }
        .child {
            font-size: 30px;
            line-height:  50px;
            background: #666;
        }
    </style>

posted on 2018-02-06 13:55 林晓峰阅读(148) 评论(0) 收藏举报

刷新页面返回顶部