flex布局实现垂直居中

使用flex布局实现居中布局的步骤：

父级元素使用flex布局
父级元素使用align-items: center;

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.a {display: flex;/* 垂直居中 */align-items: center;background-color: royalblue;height: 100px;}.a .one {background-color: aqua;height: 20px;}.a .two {margin-left: auto;background-color: red;height: 20px;}</style></head><body><div class="a"><div class="one">111111111111111111</div><div class="two">222222222222222222</div></div></body>
</html>

效果：

flex布局实现垂直居中相关推荐

flex布局水平垂直居中
在flex布局中,子元素的属性代码写在父盒子里面,并且flex布局中任何元素都可以设置大小:居中的思路就是分清楚主轴justify-content和侧轴align-items,都设置为center即可 ...
flex vue 垂直居中居上_移动开发-flex 布局
好好学习,天天向上主要内容为:原理理解,抽风式更新 flex 布局 1.了解 felx 布局原理传统布局兼容性好布局繁琐局限性,不能在移动端更好的布局 flex 布局操作方便,布局极为简单, ...
bootstrap 垂直居中布局_CSS3 flex 布局必须要掌握的知识点
flex 布局已经流行好久了,从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;),到后来的各种兼容写法,再到后来基本上就是只用 fl ...
flex布局以及实现垂直居中
flex布局的原理给父盒子添加flex属性,来控制盒子的位置和排列方式(当我们给父元素设置为flex布局以后,子元素的float.clear和vertical-align属性将失效) flex:布局 ...
常用的几种布局方式---Flex 布局(垂直居中展示）
常用的几种布局方式---Flex 布局(垂直居中展示) 前言一.默认使用静态布局二.flex布局 1.父元素container 1.1.display:flex 1.2.flex-directio ...
flex布局实现元素的垂直居中
转载:[转载自这里](https://blog.csdn.net/amberqu/article/details/79700974) 转 Flex实现元素的水平居中和垂直居中 2018年03月26日 ...
flex布局垂直居中
使用flex布局实现下面图中效果: 外框高都为400px,边框为2px:圆的宽高为100px:中圆是水平居中:下圆是水平居中以及相对于中圆垂直居中(下圆到中圆的距离和下圆到下边框的距离相等).效果如图 ...
CSS使用flex布局垂直居中水平居中问题
body{/* 渐变色 */background-image: linear-gradient(0deg,rgba(247, 247, 247, 1) 23.8%,rgba(252, 221, 221 ...
flex布局实现div内容垂直居中
实现内容垂直居中 <div class="flex"><div><p>公司名称</p><p>2021.9.15</ ...

flex布局实现垂直居中

flex布局实现垂直居中相关推荐

最新文章

热门文章