下面样式设置到父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. HDU 5524：Subtrees

    Subtrees  Accepts: 60  Submissions: 170  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 13107 ...

  2. 关于C/C++的各种优化

    一.常量 声明常量可以方便代码的修改,提高复用性. ; +; ; 同时,声明常量也可以减少重复运算,提高代码速度,例子如下: string s; cin>>s; ;i<len;i++ ...

  3. 093、Java中String类之字符串是匿名对象

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. Mongo2Go 介绍

    Mongo2Go(https://github.com/Mongo2Go/Mongo2Go )是最新的MongoDB二进制文件的托管包装, 它针对.NET Standard 1.6(对于.NET 4. ...

  5. Docker介绍（一）

    在TES GLOBAL,我们已经爱上Docker并从Docker的0.8版本开始就在生产环境中使用它.我们的很多开发者都参加了在DockerCon欧洲上的培训.下面是我们总结的一些tips,希望可以帮 ...

  6. JSTL1.0和JSTL1.1的区别

    这要从一个异常说起 According to TLD or attribute directive in tag file, attribute value does not accept any e ...

  7. leetcode841 Keys and Rooms

    """ There are N rooms and you start in room 0. Each room has a distinct number in 0, ...

  8. 吴裕雄--天生自然JAVAIO操作学习笔记：File类

    import java.io.File ; import java.io.IOException ; public class FileDemo01{ public static void main( ...

  9. 在CentOS 7环境下安装 Spark

    1.下载Spark安装包:http://mirror.bit.edu.cn/apache/spark/ 2.解压Spark的安装包并更改名称: (1)tar -zxvf spark-2.4.3-bin ...

  10. BlackArch-Tools

    BlackArch-Tools 简介 安装在ArchLinux之上添加存储库从blackarch存储库安装工具替代安装方法BlackArch Linux Complete Tools List 简介 ...