下面样式设置到父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磁盘

    1.磁盘的接口类型与命名方式 磁盘接口分为SATA.SCSI.SAS.PCI-E.光纤FC通道.常见的设备在Linux中的命名如下: 设备 设备在Linux内的文件名 IDE硬盘 /dev/hd[a- ...

  2. 最短路径问题：Dijkstra算法

    定义 所谓最短路径问题是指:如果从图中某一顶点(源点)到达另一顶点(终点)的路径可能不止一条,如何找到一条路径使得沿此路径上各边的权值总和(称为路径长度)达到最小. 下面我们介绍两种比较常用的求最短路 ...

  3. Activemq、Rabbitmq、Rocketmq、Kafka的对比

    综上所述,各种对比之后,我个人倾向于是: 一般的业务系统要引入MQ,最早大家都用ActiveMQ,但是现在确实大家用的不多了,没经过大规模吞吐量场景的验证,社区也不是很活跃,所以大家还是算了吧,我个人 ...

  4. SciPy 统计

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

  5. 学习Linux让我进入了知名企业

    说起我学习Linux的原因是多方面的,大学时我学的是物理学师范专业,有部分计算机课程,但我觉得这些课程没什么实际作用,我自己对计算机比较感兴趣,我利用业余时间学习了很多计算机技术.在大学期间我参加了很 ...

  6. SDOI 种田记

    day3: 今天早上来重新看了一下,IQ--,智障的感觉2333.弱势围观了一发众神奔,发现好多人都A了第三题,然而回想起自己考试的时候傻傻的码第二题的错误代码,真的是感觉mdzz. 不想吐槽了,记得 ...

  7. java中数组输出的方式

    方式1:遍历输出 public class Main { public static void main(String[] args) { int[] ns = { 1, 4, 9, 16, 25 } ...

  8. 053、Java中使用for循环实现1～100的累加

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

  9. delphi关闭和禁用Windows服务

    function StopServices(const SvrName: string): Boolean; var SCH, SvcSCH: SC_HANDLE; SS: TServiceStatu ...

  10. face_recognition人脸识别

    对亚洲人识别准确度有点差,具体安装移步:https://www.cnblogs.com/ckAng/p/10981025.html 更多操作移步:https://github.com/ageitgey ...