5.【前端小白】傻傻的水平居中+垂直居中:) #5

blff122620 · 2017-06-06T09:35:01Z

不说话，直接上码

顺便附赠几个垂直居中方案，垂直居中，简直是前端中的噩梦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>center</title>
    <style>
        .demo{
            width: 100%;
            height: 100px;
            margin: 10px;
            background: #ccc;
        }
        .demo>div{
            background: black;
            color:white;
            height: 100%;
            font:25px/4 arial;
        }
        .demo1{
            display: inline-block;
            
        }
        .text-align{
            text-align: center;
        }
        .demo2{
            display: table;
            margin: 0 auto;
        }
        .demor{
            position: relative;
        }
        .demo3{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
        }
        .demof{
            display: flex;
            justify-content: center;
        }
        .demo4{
            margin: 0 auto;/* 也可以对flex-item进行设置这个居中*/
        }
        .demo-v{
            background: #ccc;
            height: 300px;
            margin: 10px;
        }

        .demov{
            display: table-cell;
            vertical-align: middle;
            
        }

        .demo5{
            height: 50px;
            background: lightgreen;
        }
        .demovi{
            position: relative;
        }
        .demo6{
            position: absolute;
            background: lightgreen;
            transform: translateY(-50%);
            top:50%;
        }
        .demovii{
            display: flex;
            /*默认align-items为strech*/
            align-items: center;
        }
        .demo7{
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="demo text-align">
        <div class="demo1">demo</div>
    </div>
    <div class="demo ">
        <div class="demo2">demo</div>
    </div>
    <div class="demo demor">
        <div class="demo3">demo</div>
    </div>
    <div class="demo demof">
        <div class="demo4">demo</div>
    </div>
    <div class="demo-v demov">
        <div class="demo5">demo</div>
    </div>
    <div class="demo-v demovi">
        <div class="demo6">demo</div>
    </div>
    <div class="demo-v demovii">
        <div class="demo7">demo</div>
    </div>
</body>
</html>

blff122620 changed the title ~~【前端小白】傻傻的水平居中:)~~ 【前端小白】傻傻的水平居中+垂直居中:) Jun 6, 2017

blff122620 changed the title ~~【前端小白】傻傻的水平居中+垂直居中:)~~ 5.【前端小白】傻傻的水平居中+垂直居中:) Jun 6, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5.【前端小白】傻傻的水平居中+垂直居中:) #5

5.【前端小白】傻傻的水平居中+垂直居中:) #5

blff122620 commented Jun 6, 2017

5.【前端小白】傻傻的水平居中+垂直居中:) #5

5.【前端小白】傻傻的水平居中+垂直居中:) #5

Comments

blff122620 commented Jun 6, 2017

不说话，直接上码