鍍金池/ 問答/HTML/ 寬高都為百分比的情況下有什么辦法好垂直水平居中？transform會(huì)有模糊，不推

寬高都為百分比的情況下有什么辦法好垂直水平居中？transform會(huì)有模糊，不推薦

現(xiàn)在 有一個(gè)DIV有寬高的元素,想要在瀏覽器的中間,該如何處理?不使用transform

回答
編輯回答
尛曖昧

#father{

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

或者：

#father {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack : center;
}
2018年6月6日 06:38
編輯回答
假灑脫

所有的水平垂直居中方案都在這了
點(diǎn)進(jìn)去選一個(gè)吧

2018年4月19日 03:44
編輯回答
兮顏

display:table-cell;
text-align:center;
vertical-align:middle;

2017年7月16日 23:00
編輯回答
瘋子范

div{

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

不定高度用JS或者CSS3.

2018年7月1日 05:55
編輯回答
青瓷

彈性盒，彈性盒呀。。

2018年9月8日 00:12
編輯回答
青瓷

補(bǔ)充下 @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>
2017年4月27日 00:35
編輯回答
有你在

高寬百分比的話
left=(100 - 寬的百分比)/2+'%'
top同理啊

2017年4月17日 20:07
編輯回答
挽歌
div{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
2017年6月16日 12:11