下面样式设置到父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. 【Python基础知识】【语法】【入门】

    一.Python概述 Python是一门面向对象的编程语言,拥有强大丰富的库,没有操作系统的限制,是一种优美.清晰的编程语言. 二.Python基础语法 1.Python标识符 标识符就是程序中定义的 ...

  2. Linux centos7 shell特殊符号、cut命令、sort_wc_uniq命令、tee_tr_split命令、shell特殊符号

    一.shell特殊符号.cut命令 *任意字符 [root@davery ~]# ls /tmp/*.txt/tmp/1.txt /tmp/2.txt /tmp/q.txt[root@davery ~ ...

  3. LCS(Longest Common Subsequence)最长公共子序列

    最长公共子序列(LCS)是一个在一个序列集合中(通常为两个序列)用来查找所有序列中最长子序列的问题.这与查找最长公共子串的问题不同的地方是:子序列不需要在原序列中占用连续的位置 .最长公共子序列问题是 ...

  4. 083、Java数组之方法返回数组

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

  5. java使用zookeeper实现的分布式锁示例

    java使用zookeeper实现的分布式锁示例 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-07我要评论 这篇文章主要介绍了java使用zookeeper实现的分布式锁示例,需要 ...

  6. 题解 UVA10298 【Power Strings】

    此题我写的是后缀数组SA解法,如果不会后缀数组的可以跳过本篇blog了. 参考文献:罗穗骞 2009集训队后缀数组论文 前记 最近学后缀数组,肝了不少题,也分出了后缀数组的几个题型,看这题没有后缀数组 ...

  7. centos 搭建 git 服务端和客户端

    centos 搭建git需要设置远程服务端和客户端.远程代码存放在服务端,多个客户端可以共享和维护服务端代码. 一.服务端主机 1.创建ssh,大部分默认已经安装,有ssh就跳过 yum instal ...

  8. Jquery制作插件---内容切换

    //需求:点击左右导航箭头,实现内容的切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. NPM概述及使用简介

    什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP. npm是Node官方提供的包管理工具,他已经成了Node包的标准发布平台,用于Node ...

  10. 2-10 就业课(2.0)-oozie：9、oozie与hue的整合，以及整合后执行MR任务

    5.hue整合oozie 第一步:停止oozie与hue的进程 通过命令停止oozie与hue的进程,准备修改oozie与hue的配置文件 第二步:修改oozie的配置文件(老版本的bug,新版本已经 ...