方法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盒子居中的更多相关文章

  1. css盒子居中定位问题

    在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...

  2. CSS——盒子居中显示

    嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位.那么子盒子如何居中显示: 1.距离左偏离50% 2.margin-right子盒子宽度的一半 <!DOCTYPE html> < ...

  3. CSS盒子居中的常用的几种方法

    第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...

  4. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  5. CSS之盒子居中的方法

    一.盒子垂直居中的方法 1.先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离 <div class="father"> // 结构 & ...

  6. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

  7. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  8. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  9. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

随机推荐

  1. oracle数据库登录

    在做以下操作时,要确保你的数据库环境已经正确安装完成.数据库在实际应用中是比较多的,我们测试人员经常会在前台造一些测试数据,在后台数据库进行验证,当然,不局限于此,数据库也可以作为一个专项测试来谈.反 ...

  2. wc.exe指令（C++）

    https://github.com/kielingpao/wc 项目相关要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序,模仿已有wc.ex ...

  3. RegExp正则表达式对象

    JavaScript的RegExp对象有两种创建方式,一种是字面量,一种是对象. var r = /pattern/attributes或者new RegExp(pattern, attributes ...

  4. .net Stream篇（六）

    BufferedStream 目录: 简单介绍一下BufferedStream 如何理解缓冲区? BufferedStream的优势 从BufferedStream 中学习装饰模式 如何理解装饰模式 ...

  5. 《Andorid开源》greenDao 数据库orm框架

       一 前言:以前没用框架写Andorid的Sqlite的时候就是用SQLiteDatabase ,SQLiteOpenHelper ,SQL语句等一些东西,特别在写SQL语句来进行 数据库操作的时 ...

  6. HackThree

    创建自定义ViewGroup ​一,概要:     使用自定义View 和ViewGroup组织应用程序布局是一个好方法,定制组件的同时允许开发者提供自定义行为和功能,以后,开发者 在需要创建复杂布局 ...

  7. Sharepoint2013搜索学习笔记之搜索构架简单概述(一)

    Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...

  8. C#生成静态文件

    一般生成文件都是通过读取模板文件,然后替换标签. 这些古老的方法使用起来不但麻烦而且效率还不怎么样. 这里给添加介绍一个方法. 如果你用过asp.net.mvc (Razor),你就应该明白 chtm ...

  9. C#Thread学习

    一.Thread的使用方式 1.不带参数 (1)使用lambda public static void fun1() { Console.WriteLine($"Main ThreadId: ...

  10. C语言编程学习：链表的来源分析

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...