<!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. JAVA经典面试题：讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  2. HttpClient的POST请求返回302解决

    HttpClient请求POST提示302,而且返回的response中的Localtion是我访问时使用的URL, 例如:我使用的URL是https://bbs.csdn.net?client_id ...

  3. 力扣（LeetCode） 771. 宝石与石头

    给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头. S 中每个字符代表了一种你拥有的石头的类型,你想知道你拥有的石头中有多少是宝石. J 中的字母不重复,J 和 S中的所有字符都是字母 ...

  4. link和@import区别

    推荐使用:link 区别 1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用:link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS.rel 连接属性 ...

  5. 关于前端SEO的一些常用知识总结

    Search English Optimization,搜索引擎优化,简称为SEO. (1)网站结构布局优化:尽量简单 1. 控制首页链接数量:首页链接不能太多,一旦太多,没有实质性的链接,很容易影响 ...

  6. Appium解决搜索框问题

    appium解决搜索框: 1. 点击搜索,手工测试会弹出键盘,需要点击键盘上的搜索按钮. 2.但自动化的时候,键盘不能弹出.所以我们可以用回车等keycode代替搜索按钮. Press Keycode ...

  7. 最多的划分来使数组有序 Max Chunks To Make Sorted

    2018-12-01 11:05:46 一.Max Chunks To Make Sorted 问题描述: 问题求解: 由于没有重复,所以直观的来看对于每个遇到数,其能够被划分出来的前提是其前面已经有 ...

  8. Fat jar用途

    1.Fat jar用途 我们都知道默认的eclipse下打包jar时,是无法连同外部引用包一起打包的.所以一般我们可以自己编写MINIFEST.MF文件来手动将需要的jar包加入进来,但是这样对于引用 ...

  9. 单细胞RNA-seq比对定量用什么工具好？使用哪个版本的基因组？数据来说话

    这么多工具和基因组版本,选择困难症犯了,到底用哪个好呢? 2018 nature - Developmental diversification of cortical inhibitory inte ...

  10. 第一章 Lab

    关于Lab 教材恶意代码分析实战 课后练习恶意代码样本https://practicalmalwareanalysis.com或https://nostarch.com/malware.htm 以下是 ...