元素自適應水平垂直居中

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

此方法需知道元素的寬度和高度。 首先將父元素設置爲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;
}
複製代碼

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

此方法和上面的方法差很少，首先咱們將父元素和子元素設置爲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;
}

複製代碼