下面样式设置到父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. Linux文件系统层次结构标准FHS

    文件系统层次结构标准(英语:Filesystem Hierarchy Standard,FHS)定义了Linux操作系统中的主要目录及目录内容.FHS由Linux基金会维护. 当前版本为3.0版,于2 ...

  2. 题解 LG P2264

    这是题解P2264 先讲一下Trie,其实Trie也名前缀树,就是说:如果Trie中某串是某串的前缀,那么我们可以共用这个串也就是这样: 插入h.hk.jc,jcfa 那么,h节点会给h和hk共用,j ...

  3. 「HNOI/AHOI2018」道路

    传送门 Luogu 解题思路 考虑树形 \(\text{DP}\) 设状态 \(dp[u][i][j]\) 表示从首都走到点 \(u\) ,经过 \(i\) 条公路,\(j\) 条铁路的最小不方便值. ...

  4. 【CF1217F】Forced Online Queries Problem

    题意 题目链接 动态图连通性,加密方式为 \((x+l-1)\bmod n +1\) (\(l=[上一次询问的两点连通]\)). 点数 \(n\),操作数 \(m\) \(\le 2\times 10 ...

  5. angularJs-服务调用与后台数据获取

    可以用factory做一些后台数据的获取,例如 happyFarm.factory('seedList',['$http',function($http){    return {        ge ...

  6. 吴裕雄--天生自然JAVA数据库编程：JDBC操作步骤及数据库连接操作

    public class ConnectionDemo01{ // 定义MySQL的数据库驱动程序 public static final String DBDRIVER = "org.gj ...

  7. SciPy 介绍

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  8. JavaScript 字符编码

    JavaScript 字符编码 JavaScript 遵循 Unicode 字符编码规则.Unicode 字符集中每个字符使用 2 个字节来表示,这意味着用户可以使用中文来命名 Java)Script ...

  9. NO22 Linux正则表达式--grep命令常用参数

    Linux正则表达式:  一.基础正则第一波字符说明: 示例: 二.基础正则第二波字符说明:  三.基础正则第二波字符说明: 示例:  grep:一般常用参数 示例:+和*  ?和.:  |:  () ...

  10. shiro缓存配置

    realm的缓存 方法一: 在securityManager配置中添加cacheManager配置项,会注入到realm中. 方法二:在realm中配置. realm本身实现了CacheManager ...