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的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
随机推荐
- sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法
sublime text3安装后html:5+Tab不能快速生成html头部信息的解决办法: 需要下载Emmet插件,按网上写的步骤按ctrl+shift+P打开命令面板,输入install,鼠标点击 ...
- bootstrap页面效果图
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...
- VMware下Ubuntu虚拟机NAT模式 连接Xshell
1.Edit->Virtual NetWork Editor 2.选择NAT->NAT Settings 配置端口映射关系 很重要! Host port: 真实主机 一般是Windows端 ...
- 在IE11(Win8)中检查up6.2配置
1.按F12,打开调试模式 2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的. 3.打开脚本,up6.js ...
- (转)mongodb学习（翻译1）
原文地址:http://www.cnblogs.com/Johnzhang/archive/2013/09/10/3313582.html 学习mongodb,试着翻译写,英语能力有限,希望大家指正, ...
- LeetCode(258.各位相加)的思路及解决过程
问题如下: 给一个非负整数 num,反复添加所有的数字,直到结果只有一个数字. 例如: 设定 num = 38,过程就像: 3 + 8 = 11, 1 + 1 = 2. 由于 2 只有1个数字,所以返 ...
- poj1860 Currency Exchange(spfa判断正环)
Description Several currency exchange points are working in our city. Let us suppose that each point ...
- SqlServer删除重复数据的方法
方法一 declare @max integer,@id integer open cur_rows fetch cur_rows into @id,@max begin set rowcount @ ...
- 【连载】redis库存操作，分布式锁的四种实现方式[四]--基于Redis lua脚本机制实现分布式锁
一.redis lua介绍 Redis 提供了非常丰富的指令集,但是用户依然不满足,希望可以自定义扩充若干指令来完成一些特定领域的问题.Redis 为这样的用户场景提供了 lua 脚本支持,用户可以向 ...
- ubuntu没有权限（不能）创建文件夹（目录）
可以在终端直接运行 sudo nautilus,弹出来的nautilus可以直接GUI操作,中途别关终端.如果遇到需要输入root密码,则输入root密码就可以启动这个图形界面了.