宽高都为百分比的情况下有什么办法好垂直水平居中？transform会有模糊，不推荐

菜鸡来寻码

214582128

发布于
2018-03-07

现在有一个DIV有宽高的元素,想要在浏览器的中间,该如何处理?不使用transform

css html javascript

阅读 4.4k

8 个回答

得票最新

hfhan

28.9k72241

发布于
2018-03-07

div{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

Anyway

发布于
2018-03-13

更新于
2018-03-13

新手上路，请多包涵

#father{

    display: flex;
    align-items: center;
    justify-content: center;
}

或者：

#father {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack : center;
}

foolsgold

发布于
2018-03-08

新手上路，请多包涵

div{

        position:fixed;
        left: 50%;
        top: 50%;
        margin-left: -20%;
        margin-top: -150px;
        width: 40%;
        height: 300px;
        background: yellowgreen;
    }

不定高度用JS或者CSS3.

Luogjy

3717

发布于
2018-03-13

补充下 @zzgzzg00 的回答：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .out {
            width: 200px;
            height: 200px;
            background: green;
            position: relative;
        }

        .in {
            width: 40%;
            height: 40%;
            background: red;

            position: absolute;
            /*(100%-40%)/2 */
            top: 30%;
            left: 30%;
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="in"></div>
    </div>
</body>

</html>

查看全部 8 个回答

推荐问题

宽高都为百分比的情况下有什么办法好垂直水平居中？transform会有模糊，不推荐

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？