下面样式设置到父div上：

.modal {

    display: flex;

    align-items: center;        /*竖直居中 垂直居中*/

    justify-content: center;    /*水平居中*/

}

设置此div的子元素居中显示的更多相关文章

  1. text-align：center；在ie7下，父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  2. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  3. 浅谈css中一个元素如何在其父元素居中显示

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...

  4. 关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  5. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  6. css让元素居中显示

    通常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和 margin-left:-[元素宽度的一半] ,  但是当我们的元素宽高不是固定的时候, 这就难办了, ...

  7. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  8. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  9. 【CSS】定位元素居中显示

    1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...

随机推荐

  1. WebSocket 反爬虫

    目录 WebSocket握手验证反爬虫 WebSocket 消息校验反爬虫 WebSocket Ping 反爬虫 总结 WebSocket握手验证反爬虫 ! HTTP协议 请求头 服务器端创建 soc ...

  2. ElasticSearch 表结构信息 提取

    参考: es-sql: https://github.com/NLPchina/elasticsearch-sql/releases 执行SQL语句SearchDao org.nlpcn.es4sql ...

  3. 华为轮值CEO,富士康却坚持独裁，二者究竟有什么不一样？

    谈到深圳龙华的大企业,人们会很自然地想到华为和富士康,两家公司毗邻,有两个门仅仅隔着一条马路,都是世界500强,对国家,对社区的经济发展有着重要贡献,员工压力最大的时候,也都出现过自杀的情况,一个讲究 ...

  4. boost::timer demo

    #include <iostream> #include <boost/timer.hpp> //timer的头文件 using namespace boost; //打开bo ...

  5. Django 3.0的新功能

    谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...

  6. 小米xiaomi9 google play卡在检查信息

    终于在今年淘汰掉用了三年的果6s,换了小米9 ,结果发现科学..上网后,可以正常打开google网页,却无法登陆,gmail也无法使用.一直卡在“正在核对信息”. 检查服务,小米9 全系列自带了谷歌框 ...

  7. 【高软作业3】：原型化系统 DevTools

    原型化系统:DevTools       密码:lcx 1. 这是一个什么样的平台? DevTools,可译为:开发者工具库.初衷是聚集各类开发工具,方便开发者获取:此外,大家可以分享自己的工具库与工 ...

  8. 吴裕雄--天生自然JAVA数据库编程：CallableStatement接口

    DELIMITER // DROP PROCEDURE myproc // -- 删除过程 CREATE PROCEDURE myproc(IN p1 int,INOUT p2 int,OUT p3 ...

  9. PV 动态供给【转】

    前面的例子中,我们提前创建了 PV,然后通过 PVC 申请 PV 并在 Pod 中使用,这种方式叫做静态供给(Static Provision). 与之对应的是动态供给(Dynamical Provi ...

  10. Linux-hosts

    Linux-hosts hosts文件 /etc/hosts OS hosts (path) 使其生效,命令行执行 Windows (C:\Windows\System32\drivers\etc\h ...