元素自適應水平垂直居中

AHui發表於2018-11-29

1、利用絕對定位和負邊距

此方法需知道元素的寬度和高度。 首先將父元素設定為position:relative，子元素設定為position: absolute。 將子項top和left都設定為50%，位於父項的正中心。我們還需要將子項向上移動（高度的一半）向左移動（寬度的一半）因此，子項的中心才能位於父項的正中心。為此我們設定了負margin-top、負margin-left

HTML

<div id='parent'>
    <div class='chlid'>水平垂直居中</div>
</div>
複製程式碼

CSS

#parent { 
    position:relative;
}
#parent .chlid {
    position:absolute;
    width:200px;
    height:200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
複製程式碼

2、利用絕對定位和自動拉伸

此方法和上面的方法差不多，首先我們將父元素和子元素設定為relative和absolute

HTML

<div id='parent'>
    <div class='chlid'>垂直水平居中</div>
</div>
複製程式碼

CSS

#parent  {
    positon: relative;
}
#parent .chlid {
    positon: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

複製程式碼

相關文章