css盒子居中
方法1(margin: 0 auto)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css浮动盒子居中</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: #fffccc;
text-align: center;
} .box{
background-color: red;
display: inline-block; } </style>
</head>
<body> <div class="box">
我是浮动的盒子 我要居中
</div>
</body>
</html>
方法2(inline_block)
body{
background: #fffccc;
}
.box{
background-color: red;
width: 30%;
margin: 0 auto;
}
方法三（flew）
body {
background: #fffccc;
display: flex;
justify-content: center;
height: 300px;
}
.box {
background-color: red;
width: 30%;
margin: 0 auto;
}
盒子要有高度不然其高度与父级一致
方法四 （浮动或者定位)
body {
background: #fffccc;
height: 300px;
}
.box {
background-color: red;
width: 30%;
float: left;
margin-left: 50%;
transform: translateX(-50%);
}
）
css盒子居中的更多相关文章
- css盒子居中定位问题
在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...
- CSS——盒子居中显示
嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...
- CSS盒子居中的常用的几种方法
第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- CSS之盒子居中的方法
一.盒子垂直居中的方法 1.先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离 <div class="father"> // 结构 & ...
- 《Web开发中让盒子居中的几种方法》
一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS盒子模型（Box Model）
一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
随机推荐
- Win7怎么进入安全模式 三种轻松进入Win7安全模式方法
发布时间:2013-05-27 11:23 作者:电脑百事网原创 来源:www.pc841.com 13783次阅读 win7的安全模式和XP如出一辙,在安全模式里我们可以删除顽固文件.查杀病毒.解除 ...
- 循环删除DataTable.Row中的多行问题
在C#中,如果要删除DataTable中的某一行,大约有以下几种办法: 1,使用DataTable.Rows.Remove(DataRow),或者DataTable.Rows.RemoveAt(ind ...
- .Net 数据库(SqlServer2008)的备份、还原
//备份代码private void Backup() { SqlConnection sqlConn = new SqlConnection(strConn); strFileName = &quo ...
- 编写高质量代码改善C#程序的157个建议——建议43：让接口中的泛型参数支持协变
建议43:让接口中的泛型参数支持协变 除了上一建议中提到的使用泛型参数兼容接口不可变性外,还有一种办法是为接口中的泛型声明加上out关键字来支持协变,如下所示: interface ISalary&l ...
- 20169219 NMap+Wireshark实验报告
Tcpdump介绍 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中 ...
- 匿名函数和lamda表达式
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Backbone.js 0.9.2 中文解释
// Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely ...
- .NET架构转Java开发必须了解的历史
终于不在职守在.NET领域 .NET的winform和webform项目也开发了很多了 尤其是WEB领域 从ASP -> ASP.NET 2.0 -> ASP.NET MVC 4.0 - ...
- 小程序上传多图片多附件多视频 c#后端
前言: 最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下:刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器: 用NET明白 前端上传需要用到流,然后就 ...
- WPF程序开机速度策略
WPF程序开机速度慢是一个很讨厌的问题.具体分析后,可能有以下问题 1.在主线程中加载图像导致 2.初始化各种UserControl导致 3.加载类库导致