水平垂直居中 - Githubissues

l-hammer / You-need-to-know-css

💄CSS tricks for web developers~

https://lhammer.cn/You-need-to-know-css/

Other

5.31k stars 610 forks source link

水平垂直居中 #32

Open l-hammer opened 6 years ago

l-hammer commented 6 years ago

https://l-hammer.github.io/You-need-to-know-css/#/centering-known

Description

zhangyalins commented 4 years ago

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

zhangyalins commented 4 years ago

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

l-hammer commented 4 years ago

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

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

l-hammer commented 4 years ago

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

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

lcl-101 commented 3 years ago

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

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 commented 3 years ago

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