1 justify-content:center;//子元素水平居中

2 align-items:center;//子元素垂直居中

3 display:-webkit-flex;

在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

css3不定宽高水平垂直居中的更多相关文章

  1. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  2. css/css3 未知元素宽高，垂直居中和水平居中

    未知元素的宽高情况下  垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...

  3. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  4. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  5. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  6. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  7. 不定宽高的DIV，垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

随机推荐

  1. 2019heox博客部署到coding该绕的坑-奥怪的小栈

    文章转载于:2019heox博客部署到coding该绕的坑-奥怪的小栈 这篇文章适用于初次部署和部署到github后想双线部署到coding的朋友们,我将带你们绕过一些我踏过的坑. 前言 我一开始没打 ...

  2. JavaScript中一个方法同时发送两个ajax请求问题

    今天在做项目中遇到一个问题,大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表.这两个都要通过ajax向后台拿数据,而且要在页面加载时完成.当时的做法是: ...

  3. Docker搭建Zookeeper&Kafka集群

    最近在学习Kafka,准备测试集群状态的时候感觉无论是开三台虚拟机或者在一台虚拟机开辟三个不同的端口号都太麻烦了(嗯..主要是懒). 环境准备 一台可以上网且有CentOS7虚拟机的电脑 为什么使用虚 ...

  4. Flume日志采集框架的使用

    文章作者:foochane  原文链接:https://foochane.cn/article/2019062701.html Flume日志采集框架 安装和部署 Flume运行机制 采集静态文件到h ...

  5. python 25 类的成员

    目录 1. 类的私有成员 -- __ 1.1 类的私有静态属性 1.2 类的私有方法 1.3 对象的私有方法 2. 类的其他方法 2.1 类方法 @classmethod 2.2 静态方法 @stat ...

  6. thinkPHP中的简单文章推荐（按浏览量）功能实现

    在公司中接触到了thinkPHP框架,其中要在项目中实现文章推荐功能.记录笔记如下: 一.在Controller中获取从文章列表页进入详情页传入的文章ID值. 二.在Controller中绑定数据库查 ...

  7. jvm系列(四):jvm调优-命令篇

    运用jvm自带的命令可以方便的在生产监控和打印堆栈的日志信息帮忙我们来定位问题!虽然jvm调优成熟的工具已经有很多:jconsole.大名鼎鼎的VisualVM,IBM的Memory Analyzer ...

  8. Attention机制的精要总结，附：中英文机器翻译的实现！

    1. 什么是Attention机制 在"编码器-解码器(seq2seq)"⼀节⾥,解码器在各个时间步依赖相同的背景变量来获取输⼊序列信息.当编码器为循环神经⽹络时,背景变量来⾃它最 ...

  9. 一 下载Java的JDK及配置环境变量

    1.下载JDK地址 https://www.oracle.com/technetwork/java/javase/downloads/index.html 2.点击download 3.安装JDK 我 ...

  10. 洛谷P2577 [ZJOI2005]午餐 打饭时间作为容量DP

    P2577 [ZJOI2005]午餐 )逼着自己做DP 题意: 有n个人打饭,每个人都有打饭时间和吃饭时间.有两个打饭窗口,问如何安排可以使得总用时最少. 思路: 1)可以发现吃饭时间最长的要先打饭. ...