元素自适应水平垂直居中

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;
}

复制代码

转载于:https://juejin.im/post/5bff752951882511a8529da9