元素居中总结

最新推荐文章于 2022-07-21 09:36:40 发布

啥时候能干全栈

最新推荐文章于 2022-07-21 09:36:40 发布

阅读量134

点赞数

分类专栏：前端知识点

本文链接：https://blog.csdn.net/qq_42177478/article/details/104947804

版权

前端知识点专栏收录该内容

30 篇文章 1 订阅

订阅专栏

①


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

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素居中总结

①<style> main{ position: absolute; width: 18rem; height: 6rem; top: 50%; left: 50%; /* 6/2 */ margin-top: -3rem; /* 18/2 */ margin-left: -9rem;...
复制链接

扫一扫