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的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
随机推荐
- 再谈JQuery插件$.extend(), $.fn和$.fn.extend()
在我的博客中,曾经写过一篇关于JQuery插件的文章 https://www.cnblogs.com/wphl-27/p/6903170.html 今天看一个项目的代码时,看到使用JQuery插件部 ...
- ADB常用命令简洁版整理
ADB全称Android Debug Bridge ,“安卓调试桥梁”连接Android和电脑通信的桥梁. 市面上常见的手机助手,底层调研的都是ADB命令行. C/S架构命令行工具,客户端和服务端都 ...
- What is difference between 3-layer architecture and MVC architecture?
By Vikas Singh on Sep 26, 2014 In 3-layer architecture 3-layer architecture separates the applicati ...
- Examining Application Startup in ASP.NET 5
By Steve Smith June 23, 2015 ASP.NET 5 differs from previous versions of ASP.NET in many ways. Gone ...
- HTML__图片轮播ion-slide-box
先大概描述一下要做的界面: 从网络请求json数据,获取网络图征数据,然后轮播图片.我遇到的问题是:图片不显示,代码如下 <ion-slide-box does-continue="t ...
- html5标签兼容低版本浏览器
随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...
- Jquery Call ,apply,callee
//call function A() { name = "abc"; this.ShowName = function (val) { alert(name + ",& ...
- C# 多线程操作实例
1.多线程操作 一旦打开线程就必须记得关闭 1.第一部分 这是个数字叠加小功能 private void CountTo(int countTo, CancellationToken ct) { ; ...
- 基于任务的异步编程模式（TAP）的错误处理
在前面讲到了<基于任务的异步编程模式(TAP)>,但是如果调用异步方法,没有等待,那么调用异步方法的线程中使用传统的try/catch块是不能捕获到异步方法中的异常.因为在异步方法执行出现 ...
- 如何优雅地使用win10的Linux子系统
转自: http://blog.csdn.net/u010053050/article/details/52388663 http://www.rehack.cn/techshare/devtools ...