Flex布局实现div内部子元素垂直居中的示例
2020-08-18 04:09
1051 查看
1、Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex-direction flex-wrap flex-flo justify-conten align-items align-content
2、块内元素垂直居中实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于元素垂直居中</title> <style> html, body { border: 0; margin: 0; padding: 0; height: 100%; width: 100%; } .div-main { display: flex; align-items: center; justify-content: center; height: 30%; width: 50%; background: #00a2d4; } .sub-span { margin: auto; font-size: xx-large; } </style> </head> <body> <div class="div-main"> <span class="sub-span"> 洛神赋 </span> </div> </body> </html>
到此这篇关于Flex布局实现div内部子元素垂直居中的示例的文章就介绍到这了,更多相关Flex div内部子元素垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 使用flex布局实现div垂直居中
- CSS在页面布局中实现div垂直居中的方法总结(转)
- CSS flex布局使div上下左右垂直居中
- 实现div垂直居中的display:table-cell方法示例介绍
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- Flex布局实现元素的水平居中和垂直居中——Flex布局
- flex实现div/li等水平居中布局
- CSS实现已知宽高的div垂直居中;自适应高度两列布局
- css3 flex实现div内容水平垂直居中的几种方法
- css3实现div中的input表单垂直居中 display:flex
- 如何实现flex布局下div等宽且内部文字可以溢出显示
- flex布局让两个div等高并且内容垂直居中
- 使用弹性布局(display:flex)实现元素的水平居中和垂直居中
- 用Flex布局实现块级元素垂直居中
- css布局:水平和垂直方向都居中,以及用flex实现
- 使用css实现div垂直居中的示例
- 用DIV套DIV实现水平居中布局和背景图片平铺!(示例)
- CSS在页面布局中实现div垂直居中的方法总结
- 如何实现嵌套的内部div垂直水平居中
- 如何实现未知高居垂直居中?_div+css布局教程