首页 > 其他分享 >220230823-flex实现水平垂直居中

220230823-flex实现水平垂直居中

时间:2023-09-02 10:31:59浏览次数:37  
标签:居中 flex color 220230823 300px height width background


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

运行结果

220230823-flex实现水平垂直居中_html


标签:居中,flex,color,220230823,300px,height,width,background
From: https://blog.51cto.com/u_15460007/7330797

相关文章

  • A RenderFlex overflowed by 483 pixels on the right.
    ARenderFlexoverflowedby483pixelsontheright.Flutter出现List<dynamic>isnotasubtypeoftypeList<String>解决方法_flutterlist<dynamic>_codekxx的博客-CSDN博客https://blog.csdn.net/codekxx/article/details/104557944 翻译搜索复制......
  • 移动端/H5/rem 开发,使用lib-flexible 和 postcss-pxtorem适应不同分辨率
    一、安装 1.直接使用npm包管理工具进行下载npminstalllib-flexible--savenpminstallpostcss-pxtorem--save*如果报错:“Error:PostCSSpluginpostcss-pxtoremrequiresPostCSS8.”报错的意思是postcss-pxtorem为8.0,但实际上官网最新版本为6.0(有可能是6.0版本与v......
  • css flex 布局注意事项
    1.父容器主要设置的属性 flex-flow(flex-direction主轴方向和flex-wrap如何换行的简写):默认为  rownowrap即水平左起点不换行第一个值的其他可能:row-reverse:水平,右;  column:垂直,起点在上沿;  column-reverse:垂直;下沿第二个值的其他可能:wrap:换行,第一......
  • flexible.js 自动计算font-size
    flexible.js?flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size,然后所有的px都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案,也就是说它......
  • 【校招VIP】CSS校招考点之水平/垂直居中
    考点介绍:前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架搭建之中,又有居中布局/多列布局/全局布局。今天介绍一下居中布局的水平居中和垂直居中。一、考点题目1、请使用绝对定位实现水平垂直居中。解答:在平时,我们经常会碰到让一个div框针对某个模块上......
  • MyBatis-Flex:超越Mybatis-plus的优雅魅力
    MyBatis-Flex一个优雅的MyBatis增强框架。更轻量MyBatis-Flex除了MyBatis本身,再无任何第三方依赖,因此会带来更高的自主性、把控性和稳定性。在任何一个系统中,依赖越多,稳定性越差。更灵活MyBatis-Flex提供了非常灵活的QueryWrapper,支持关联查询、多表查询、多主键、逻辑删除......
  • 20230822-实现两盒子垂直水平居中定位方式
    24/100保存草稿发布文章加粗斜体标题删除线无序有序待办引用代码块运行代码资源绑定图片视频表格超链接投票导入导出保存撤销重做历史new模版使用富文本编辑器目录创作助手语法说明#代码部分```<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta......
  • flex为1的时候,子元素限制一行时内容撑出父元素布局解决方案
    解决方法:1、在子元素的父级加overflow:hidden;2、在子元素的父级上加width:0;或者height:0;相关问题:当子元素是自适应父元素的情况下,但子元素大小超出了父元素,在低版本浏览器(我的是v85.0.4183.83)会出现宽度/高度自动无限增大的bug,将父元素无限撑大......
  • css单行垂直居中,超过两行显示省略号
    HTML:<div><span>单行居中,多行居左单行居中,多行居左</span></div><div><span>单行居中</span></div>CSS:span{font-size:14px;overflow:hidden;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;disp......
  • flex布局
    flex布局原理flex是flexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。flex布局又叫伸缩布局、弹性布局、伸缩盒布局、......