<!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. [原][粒子特效][spark]粒子系统system、主节点group、渲染器render

    深入浅出spark粒子特效连接:https://www.cnblogs.com/lyggqm/p/9956344.html system: A class defining a complete sy ...

  2. 项目上有红色感叹号, 一般就是依赖包有问题, remove依赖,重新加载,maven的也行可认删除,自己也会得新加载

    项目上的红色叹号, 要下面提示: "Problems"  里的errors  , 看是什么错误,  一般是由于网络等原因,  依赖没有下载完整,  只有文件名字对了,  内容不全, ...

  3. R语言barplot双坐标作图

    需要注意的是,设置其中的柱子的宽度,间隔的宽度.有公式如下 width为柱子的宽度 space为间隔宽度 barnumbers 为柱子数量 那么xlim的设置右侧范围为:(width + space) ...

  4. springboot之启动方式

    我们在ideal中启动springboot项目时时不需要加载Tomcat容器的,直接在启动类启动就行了,原因是springboot项目中默认包含了内置Tomcat //springboot项目必须引入 ...

  5. Java定时器的三种实现方式

    一.普通thread /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简单的实现, ...

  6. WmiPrvSe.exe 的 cpu 占用

    经常会看到这个进程cpu升上去,然后播放视频卡顿,鼠标移动卡顿. 1) 首先怀疑公司的Mcafee, 然后竟然检索除了一篇文章,MCafee表示不背锅. 2)找到这篇文章,微软表示,不能看表面,你得查 ...

  7. OnSen UI结合AngularJs打造”美团"APP"我的”页面 --Hybrid App

    1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...

  8. Java接口简单理解

    1.接口: 接口成员变量默认声明方式:public.static.final 接口成员方法默认声明方式:public.abstract public interface Interface_class ...

  9. LeetCode--496--下一个更大元素I（java）

    给定两个没有重复元素的数组 nums1和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 x 的下一个更大 ...

  10. You Don't Know JS: Async & Performance（第3章， Promises）（未看）

    Chapter 3: Promises But what if we could uninvert that inversion of control? What if instead of hand ...