CSS

子div在父div的垂直居中问题

2018-10-15  本文已影响0人  前端葱叶

呵~我又来整理笔记了,废话不多说,上代码!

如何实现子div在父div垂直居中的效果呢?(类似下图的效果)

子div在父div垂直居中
这里有两种方案:
1.父:writing-mode:vertical-lr;
 子:margin:auto;
2.父:position:relative;
 子:position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
方案一:

父:writing-mode:vertical-lr;
子:margin:auto;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子div在父div的居中问题</title>
    <style>
        /* 方案一 */
    .father{
        width: 400px;
        height: 400px;
        background: red;
        writing-mode: vertical-lr;
    }
    .child{
        width: 100px;
        height: 50px;
        background: purple;
        margin: auto;
    }
    </style>
</head>

<body>

    <div class="father">
        <div class="child"></div>
    </div>
</body>

</html>
方案二:

父:position:relative;
子:position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子div在父div的居中问题</title>
    <style>
        /* 方案二 */
        .father {
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
        }

        .child {
            width: 100px;
            height: 50px;
            background: purple;
            /* 以下几步很重要! */
            margin: auto;
            position: absolute;
            top: 0;
          /*把right:0加上就是垂直水平居中*/
           /* right: 0;*/
            bottom: 0;
            left: 0;

        }
    </style>
</head>

<body>

    <div class="father">
        <div class="child"></div>
    </div>
</body>

</html>

附:
right:0加上是垂直居中的最后效果:

image.png

推荐一篇文章:
CSS实现水平垂直居中的1010种方式

上一篇下一篇

猜你喜欢

热点阅读