flex水平垂直居中

简介: 我是通过flex的水平垂直居中噢! html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-...
<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢!</div>
</div>
html,body{
  width: 100%;
  height: 200px;
}
.parent {
  display:flex;
  align-items: center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background-color:red;
}
.children {
  background-color:blue;
}

 

目录
相关文章
|
6月前
|
搜索推荐
什么是 Pledge to Flex
什么是 Pledge to Flex
34 0
|
8月前
flex+margin布局方法
flex+margin布局方法
|
8月前
|
JavaScript 容器
什么是Flex
1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5:可以控制元素在页面上的布局方向; 6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
91 0
|
8月前
CSS3【display: flex;】与【flex-direction: 主轴方向;】的使用
CSS3【display: flex;】与【flex-direction: 主轴方向;】的使用
45 0
|
10月前
垂直居中 #32
垂直居中 #32
29 0
|
前端开发
css:flex布局最后一个子元素靠右摆放-flex:1
css:flex布局最后一个子元素靠右摆放-flex:1
1839 0
css:flex布局最后一个子元素靠右摆放-flex:1
|
前端开发
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
81 0
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
|
前端开发 容器
flex从总结到了解
flex 是一种布局方式,在 CSS3 之后开始有。它主要由父容器和子项组成
157 1
flex从总结到了解