html盒子水平和垂直居中
<!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盒子水平和垂直居中的更多相关文章
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- CSS（九）：设置盒子水平垂直居中
通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- HTML技巧篇：实现元素水平与垂直居中的几种方式
如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题. 1)单行文本的居中 主要实现css代码: 水平居中:text-align:center;垂直居中:l ...
- div的水平和垂直居中
CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...
- DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...
- 让div等块级元素水平以及垂直居中的解决办法
一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- 让DIV中的内容水平和垂直居中
让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...
- 【转】如何让DIV水平和垂直居中
来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...
随机推荐
- Kali Linux 更新源 操作完整版教程
一.查看kali系统的更新源地址文件 命令: vim /etc/apt/sources.list 上面这是kali官方的更新源: 拓展知识: 一个完整的源包括:deb 和 deb-src:上图源地址是 ...
- 排序——冒泡排序(java描述)
百度百科:冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法. 它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果他们的顺序(如从大到小.首字母从A到Z)错误就把他们交 ...
- Linux学习3-yum安装java和Tomcat环境
前言 linux上安装软件,可以用yum非常方便,不需要下载解压,一个指令就能用yum安装java和tomcat环境. 前面一篇已经实现在阿里云服务器上搭建一个禅道系统的网站,算是小有成就,但并不是每 ...
- Racadm设置idrac
参考文档 idrac7-8-lifecycle-controller-v2.40.40.40_Reference Guide_en-us 0.下文中账户名密码均省略-r <RAC IP add ...
- JavaScript学习第一天（一）
JavaScript介绍 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- 获取解码字符串指定位置的数值 Decoded String at Index
2018-10-04 12:53:06 问题描述: 问题求解: 首先本题给出了问题的规模,从Note中我们可以看到解码后的字符串长度甚至可以达到2^63的长度,这个长度已经远远超过整型数的范围,因此如 ...
- 圆的变化（自定义动画，及自定义UI）
之前在面试的时候被问到过一个问题,如何实现一个圆沿着一条线由大到小 当时回答的含糊不清,现在已经明白怎么去实现 关键点:Paint,path,canvas 一种方法 在activity中去控制圆的x, ...
- android ------- TCP/IP
TCP/IP 是针对因特网的通信协议. 什么是 TCP/IP? TCP/IP 是供已连接因特网的计算机进行通信的通信协议. TCP/IP 指传输控制协议/网际协议 (Transmission Cont ...
- HTML页面的三种弹框方式
1.弹出警告框,带确定按钮:alert 2.弹出,选择框 有确认和取消按钮 confirm 3. 弹出,输入框 : prompt
- Android VideoView播放网络视频简介（转）
最近项目中用到了很多视频播放的地方,不管是聊天发送的视频消息,还是类似内涵段子的视频列表,都会涉及这些知识,不过网上的知识都很零散,一会找缓存方法,一会找预览图片的方法,一会找视频动态修改尺寸的方法, ...