水平垂直居中

[l-hammer]

水平垂直居中

[zhangyalins]

绝对定位 position: absolute 限定宽高 这个要给父元素添加相对定位position:relative，要不然都跑出去了，flex好像没啥作用

[zhangyalins]

我想知道top: calc(50% - 16px); left: calc(50% - 72px); 为啥是减去16px 和72px呢，有什么原理吗

[l-hammer]

我想知道top: calc(50% - 16px); left: calc(50% - 72px); 为啥是减去16px 和72px呢，有什么原理吗

这里减去的是元素自身宽/高的一半

[l-hammer]

绝对定位 position: absolute 限定宽高 这个要给父元素添加相对定位position:relative，要不然都跑出去了，flex好像没啥作用

是需要加relative的。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）

[lcl-101]

这是在移动端经常使用的方式

display: flex no limit to width & height

main {
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 152px;
}
main > div {
    flex: 0 1 auto;
    background: #b4a078;
    color: white;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 0.5em #b4a078;
}

<main>
  <div>Center me, please!</div>
</main>

[wlll122]

定位居中,应该在父元素加一个position:absolute;更加容易懂吧!