終於找到一種有效的垂直居中方法

時間 2019-12-05

標籤終於找到一種有效垂直居中方法简体版

原文原文鏈接

今天終於發現了一種有效的垂直居中方法（塊級元素裏面的塊級元素居中），寫了個demo試了一下。不過此方法要求父級元素和本身元素都有定位，且本身元素要有明確的高寬。demo以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            background: #EEEEEE;
            width:500px;
            height:500px;
            /*父節點定位可爲relative,absolute,fixed*/
            position:relative;
        }
        #child{
            background: #2e6da4;
            /*子節點定位爲absolute*/
            position:absolute;
            width:400px;
            height:300px;
            /*設置top，left分別爲爲50%*/
            top:50%;
            left:50%;
            /*設置margin-top，margin-left分別爲高，寬的 負 一半*/
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
        </div>
    </div>
</body>
</html>

截圖以下：
spa

其中原理我還須要體會一下。另外，也求其餘的好方法，但願你們分享~~code

相關標籤/搜索