下面样式设置到父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. APIView 的请求生命周期

    目录 APIView 的请求生命周期 请求解析模块 响应渲染模块 序列化组件 Django 配置 """ 1)应用是否需要在INSTALLED_APPS中注册 在没有使用 ...

  2. PCIE_DMA：xapp1052学习笔记

    Moselsim仿真: EP为Endpoint部分实现代码,即例程主代码.其他的是搭建的仿真环境,主要目的是仿照驱动的行为,将PCIE软核用起来,主要是做PC端的行为仿真,如DMA配置,DMA读写操作 ...

  3. Day2-K-Red and Black-HDU1312

    There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...

  4. 连接数据库 - (mysql-thinkphp) (2)

    1.现在conf里面写好选择的数据库 选择好了以后 2.在index里面输入 查询mysql数据库里面的表tables_priv的所有数据 public function index() { $res ...

  5. 2019 OI日记

    //  我觉得记日记是个好习惯吧 毕竟指不定哪天就学不下去了 就AFO了 就没有梦了   // [置顶]活跃于你谷普及训练场.ybt(没底气说全部).loj(提高基础部分)  //优先级从前往后 因为 ...

  6. ROS常用库（三）API学习之常用common_msgs（上）

    一.概述 common_msgs包含其他ROS软件包广泛使用的消息.这些消息包括动作消息(actionlib_msgs),诊断消息(diagnostic_msgs),几何图元(geometry_msg ...

  7. ROS大型工程学习（四）一键安装所有缺失的依赖！！！

    在正文之前,我必须向rosdep道个歉,前面那篇常用命令行中没有它的位置,现在单独写一篇补充!! 突然发现rosdep有个惊人的功能, rosdep install --from-paths src ...

  8. 简述DDD，战略设计

    从What.How.Why三个层面进行了梳理. What:DDD是什么?DDD是用来解决软件复杂度的问题,是一种软件思想. Why:为什么DDD可以解决软件复杂度?对于规模造成的复杂度,可以借助限界上 ...

  9. python基础数据类型--元组（tuple）

    python基础数据类型--元组(tuple) 一.元组的定义和特性 定义:与列表相似,只不过就是将[ ] 改成 ( ) 特性:1.可以存放多个值 2.不可变 3.按照从左到右的顺序定义元组元素,下标 ...

  10. python中pip的安装问题

    当系统中同时存在python2.python3的时候,在进行pip下载的时总出现不知道用哪个 情况,此时就需要这样做: python2 -m pip install numpy //使用pip给pyt ...