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的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
随机推荐
- markdown的图片外链
markdown的图片用本地的很不方便,今天试用了一下七牛的服务,感觉很好用.推荐一下,免费的服务够用并且比较友好.
- javascript总结8:JavaScript 类型转换
1 JavaScript 数据类型转换 1.1 数字类型转字符串 n1 = 10;var n2 =String(n1); 或者 var n3 = n1.toString(n1); 1.2 字符串转数字 ...
- 设计模式04： Factory Methord 工厂方法模式（创建型模式）
Factory Methord 工厂方法模式(创建型模式) 从耦合关系谈起耦合关系直接决定着软件面对变化时的行为 -模块与模块之间的紧耦合使得软件面对变化时,相关的模块都要随之变更 -模块与模块之间的 ...
- Django中使用后台网站模板
背景: 一直想自己开发一个网站,但是前端知识又不多,好在有模板可以使用,下载地址:https://download.csdn.net/download/wjgccsdn/10843808 开干: ...
- dubbo 安装部署Windows
1 安装zookeeper 2 安装dubbo 1 下载源码 https://github.com/alibaba/dubbo 2 编译 mvn clean package install -D ...
- MS SQL Server计算间隔时间
开始需要,写了一个计算时间间隔的函数,可以参考: 得到的结果: 再列举一个例子:
- const限定符、constexpr和常量表达式------c++ primer
编译器将在编译过程中把用到const变量的地方都替换成对应的值,为了执行这种替换,编译器必须知道变量的初始值.如果程序包含多个文件,则那个用了const对象的文件都必须能访问到它的初始值才行.要做到这 ...
- React进阶篇（1） -- react-router4模块化
本篇内容: 单一的路由无嵌套 多层嵌套路由 获取路径中的参数 按需加载 单一的路由无嵌套 routers.js import Home from 'components/Home'; import N ...
- 洛谷P4009 汽车加油行驶问题（分层最短路）
传送门 说好的网络流24题呢……上次是状压dp,这次怎么又最短路了…… 不过倒是用这题好好学了一下分层图最短路 把每一个位置$(x,y)$,油量剩余$k$表示为一个状态,然后转化成一个$n$进制数,这 ...
- centos6.3安装 jdk-8u131-linux-x64.gz
解压指令为:tar -zxvf jdk-8u131-linux-x64.gz 设置环境变量,首先是打开设置环境变量的文件夹,指令为:vi /etc/profile 然后在英文输入法下切换到“插 ...