display:flex垂直居中

display:flex垂直居中布局说明:1.场次为一场比赛     2.比赛双方是交战的两个队伍        3.一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都不确定。主要说下我学到的垂直居中的flex。1.第一次尝试。1divclass=”parent”>2h1>我是通过flex的水平垂直居中噢h1>3h1>我是通过fl

大家好,又见面了,我是你们的朋友全栈君。

 布局说明:1. 场次为一场比赛

      2. 比赛双方是交战的两个队伍

               3. 一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都不确定。

display:flex垂直居中

主要说下我学到的垂直居中的flex。

1. 第一次尝试。

复制代码
1 <div class="parent">
2   <h1>我是通过flex的水平垂直居中噢</h1>
3   <h1>我是通过flex的水平垂直居中噢</h1>
4   <h1>居中</h1>
5   <h1>我是通过flex的水平垂直居中噢</h1>
6 </div>
复制代码
复制代码
html,body{
  
  
  width: 100%;
  height: 200px;
  margin:0;
  padding:0;
}
.parent {
  
  
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background: #ddd
}
h1{
  
  
  border:1px solid #f00;
  margin:0;
  padding:0;
  width:25%;
}
复制代码

display:flex垂直居中

但是我想要的效果是第三栏的高度和其他栏的高度一样,并且居中。如此css改成了

2. 第二次的更改

复制代码
html,body{
  
  
  width: 100%;
  height: 200px;
  margin:0;
  padding:0;
}
.parent {
  
  
  display:flex;
  width:100%;
  height:100%;
  background: #ddd
}
h1{
  
  
  border:1px solid #f00;
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  margin:0;
  padding:0;
  width:25%;
}
复制代码

display:flex垂直居中

达到了想要的效果。:)  相当于又嵌套了一层。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130237.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • iOS5完美越狱后必装AppSync补丁教程

    iOS5完美越狱后必装AppSync补丁教程  iPhone4等设备完美越狱终于发布,不过完美越狱完成后如果给iPhone上安装从iPhone中文网或者其他网站上下载ipa后缀格式的软件和游戏,还有一项重要的工作就是在CYIDIA上安装ipa补丁AppSync5.0+,下面就教大家怎样安装。第一次进入Cydia程序需要选择“用户”,点击右上角“完成”选择界面底部的“管理”菜单,选择“软件源”菜单点右…

  • mysql中int、bigint、smallint 和 tinyint的区别详细介绍

    mysql中int、bigint、smallint 和 tinyint的区别详细介绍

    2021年10月25日
  • openfire 使用已有的数据库作为用户认证数据库 Custom Database Integration Guide「建议收藏」

    openfire 使用已有的数据库作为用户认证数据库 Custom Database Integration Guide

  • linux的vi命令详解_useradd命令详解

    linux的vi命令详解_useradd命令详解最近vi用的多,很多技巧不知道,备注一份,vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本,vi编辑器是完全相同的,因此您可以在其他任何介绍vi的地方进一步了解它。Vi也是Linux中最基本的文本编辑器,学会它后,您将在Linux的世界里畅行无阻。

  • XMind思维导图快捷键[通俗易懂]

    XMind思维导图快捷键[通俗易懂]快捷键的使用会让我们的工作效率大大的提高,XMind做为思维导图中软件的佼佼者,让众多办公的人们体会到了便捷;这么好使的一个工具,它的快捷键还不快快的学习/使用起来吗?需要更多教程,微信扫码即可XMind快捷键汇总先来张比较全的大图然后我们再来分解快捷键的大图,顺序按照XMind顶部的菜单顺序。一、文件【注】Command为Mac系统,若为Windows系统换为Ctrl即可,例如:Command+C/V(Mac)=>Ctrl+C/V…

  • Hwclock_k8s 源码分析

    Hwclock_k8s 源码分析hwclock解析hwclock用于操纵rtc中的时间1/判断命名所属包linux@ubuntu:~/project/tmp/300/drv/test_trc$dpkg-Shwclockutil-linux:/etc/init.d/hwclock-saveutil-linux:/usr/share/man/man8/hwclock.8.gzutil-linux:/etc/init/

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号