flex布局和垂直居中方法总结

最新推荐文章于 2023-07-16 21:39:10 发布

妍华

最新推荐文章于 2023-07-16 21:39:10 发布

阅读量1.1k

点赞数

分类专栏： java web学习笔记文章标签： html

本文链接：https://blog.csdn.net/yanhua1575/article/details/105429753

版权

java web学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

flex布局可以参考以下的文章内容，较为详细

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

网页布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

垂直居中的解决方案（如下效果所示）：
在这里插入图片描述
1.
父元素设置相对定位
子元素设置绝对定位 margin auto

<body>
     <div id = "box">
         <div id = "child">

         </div>
     </div>

</body>
<style>
    #box{
        width: 300px;
        height: 300px;
        background-color: crimson;
        position: relative;
    }
    #child{
        width: 150px;
        height: 100px;
        background-color:blueviolet;
        position: absolute;
        top:0;
        bottom: 0;
        left:0;
        right: 0;
        margin:auto;
    }
</style>

父元素设置flex
flex-direction:column;
justify-content: center;
子元素设置
align-self: center;

<style>
    #box{
        width: 300px;
        height: 300px;
        background-color: crimson;
        display: flex;
        flex-direction:column;
        justify-content: center;
    }
    #child{
        width: 150px;
        height: 100px;
        background-color:blueviolet;
       align-self: center;
    }
</style>

父元素设置相对定位
子元素设置绝对定位
top:50%;
left:50%;
transform:translate(-50%,-50%);

<style>
    #box{
        width: 300px;
        height: 300px;
        background-color: crimson;
        position: relative;
    }
    #child{
        width: 150px;
        height: 100px;
        background-color:blueviolet;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
       //向上，向左调整50%
    }
</style>

父元素
display: table;
子元素：
display: table-cell;
vertical-align:center;

<style>
    #box{
        width: 300px;
        background-color: crimson;
        padding: 100px;
        display: table;
    }
    #child{
        width: 100px;
        height: 100px;
        background-color:blueviolet;
       display: table-cell;
        vertical-align:center;
    }
</style>

妍华

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局和垂直居中方法总结

flex布局可以参考以下的文章内容，较为详细https://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.html网页布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些...
复制链接

扫一扫