CSS flex布局使div上下左右垂直居中

最新推荐文章于 2024-11-18 22:09:26 发布

JCAL123

最新推荐文章于 2024-11-18 22:09:26 发布

阅读量4k

点赞数

分类专栏： css布局文章标签： Flex布局 css垂直居中布局

本文链接：https://blog.youkuaiyun.com/JCAL123/article/details/88535342

版权

css布局专栏收录该内容

2 篇文章

订阅专栏

CSS flex布局使div上下左右垂直居中

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。本文主要介绍利用Flex实现垂直居中布局，代码如下：

html部分
<body>
	<div class="main">
	       <div class="middle">居中部分</div>
	</div>
</body>

style部分
   .main{
      display: flex;
      width: 100%;  //需要设置父元素的宽度和高度
      height: 100%;
      border: 1px solid #2b333f;
      box-sizing: border-box;
    }
    .middle{
      margin: auto;
    }

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键。