<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#main {

    width: 400px;

    height: 150px;

    border: 1px solid #c3c3c3;

    display: flex;

    justify-content: center;

	align-items: center;

}

#main div {

    width: 70px;

    height: 70px;

}

</style>

</head>

<body>

<div id="main">

  <div style="background-color:coral;"></div>

</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>

<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>

</html>

　　

原文地址：http://www.runoob.com/try/try.php?filename=trycss3_justify-content

html盒子水平和垂直居中的更多相关文章

  1. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  2. CSS（九）：设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. HTML技巧篇：实现元素水平与垂直居中的几种方式

    如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题. 1)单行文本的居中 主要实现css代码: 水平居中:text-align:center;垂直居中:l ...

  4. div的水平和垂直居中

    CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...

  5. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  6. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  7. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  8. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  9. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

随机推荐

  1. Spring Bean后置处理器

    本例子源于:W3CSchool,在此作记录 Bean 后置处理器允许在调用初始化方法前后对 Bean 进行额外的处理. BeanPostProcessor 接口定义回调方法,你可以实现该方法来提供自己 ...

  2. 定时任务redis锁+自定义lambda优化提取冗余代码

    功能介绍: 我系统中需要跑三个定时任务,由于是多节点部署,为了防止多个节点的定时任务重复执行.所以在定时任务执行时加个锁,抢到锁的节点才能执行定时任务,没有抢到锁的节点就不执行.从而避免了定时任务重复 ...

  3. MYSQL去除"/r/n"

    #去除回车符号/r/n UPDATE t_week_power_line_loss SET `line_loss_rate` = REPLACE( REPLACE( `line_loss_rate` ...

  4. Go语言学习之8 goroutine详解、定时器与单元测试

    主要内容: 1.Goroutine2. Chanel3. 单元测试 1. Goroutine Go 协程(Goroutine)(轻量级的线程,开线程没有数量限制).   (1)进程和线程 A. 进程是 ...

  5. C#给整个panel添加点击事件的方法

    首先要明白两点: panel直接添加点击事件无效 panel添加透明按钮覆盖无法实现 那么方法就是 在panel上添加pictureBox 设置 //充满整个panel pictureBox1.Doc ...

  6. Jedis与Lua脚本结合

    使用Lua脚本的好处    1.减少网络开销:可以将多个请求通过脚本的形式一次发送,减少网络时延和请求次数. 2.原子性的操作:Redis会将整个脚本作为一个整体执行,中间不会被其他命令插入.因此在编 ...

  7. centos7: 将nginx,php-fpm加入开机启动

    1. 自己新建一个脚本,如centnet-service.sh 经过后面的几个步骤后,这个脚本在开机的时候会执行,在这个脚本里面可以写你开机的时候想执行的命令,如启动nginx,phpf-pm等服务 ...

  8. OSPF - 1，基础

    1,OSPF知识点a)在OSPF中,如果是环回口宣告进OSPF,不管宣告时配置的是多少位掩码,路由器收到的都是32位.(EIGRP配了多少位就收到多少位).好处:EIGRP中,在PING包发起时如果在 ...

  9. 51Nod-1441 士兵的数字游戏

    题目要求是求出a!/b!(a>=b)的结果,让其不断做除法,最多能做多少次.这个问题首先可以转化为求a!中所有质因子个数-b!中所有质因子个数.以前做过一道快速求某个阶乘对一个素数的因子个数的题 ...

  10. Myeclipse项目中Source、Projects、Libraries、Order and export含义

    Myeclipse 新建一个项目时,会出现如下界面 输入项目名,点击next Source source folder:存放.java源文件的根目录:output folder:.class编译输出的 ...