①
<style>
main{
position: absolute;
width: 18rem;
height: 6rem;
top: 50%;
left: 50%;
/* 6/2 */
margin-top: -3rem;
/* 18/2 */
margin-left: -9rem;
}
</style>
<main>
<h2>
am i centered yet?
</h2>
<p>center me please</p>
</main>
②优化后
```javascript
main{
position: absolute;
width: 18rem;
height: 6rem;
top: calc(50% - 3em);
left: calc(50% - 9em);
}
</style>
<body>
<main>
<h2>
am i centered yet?
</h2>
<p>center me please</p>
</main>
</body>
//以上居中局限于元素的宽高必须是固定的
③解除固定尺寸依赖
main{
position: absolute;
top: 50%;
left: 50%;
/* 左，上，右，下 */
transform:translate(-50%,-50%) ;
}
</style>
<body>
<main>
<h2>
am i centered yet?
</h2>
<p>center me please</p>
</main>
④视口中居中场景
<style>
main{
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
</style>
<main>
<h2>
am i centered yet?
</h2>
<p>center me please</p>
</main>
⑤最佳解决方案基于flex-box
<style>
body{
display: flex;
min-height: 100vh;
margin: 0;
}
main{
margin: auto;
}
</style>
<main>
<h2>
am i centered yet?
</h2>
<p>center me please</p>
</main>
⑥flexbox的另一个好处是，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。
<style>
main{
display: flex;
/* 弹性盒子 纵轴对齐 */
align-items: center;
/* 弹性盒子横轴对齐 */
justify-content: center;
width: 20em;
height: 10em;
}
</style>
<main>
center me please!
</main>
</body>
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
