方法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. Ext JS v2.3.0 Ext.grid.ColumnModel renderer Record 获取列值

    场景:设置某一列的值,但是需要获取其他列的值 {"header": '<s:property value="name" />', "wid ...

  2. [原创]java：Stream、Socket等源码分析

    一.对于java启动之后的线程的说明 java在启动后会有几个特殊线程: 1.main线程,主线程 2.JVM线程,虚拟机的线程 3.GC垃圾回收线程,是个守护线程 4.EDT&Toolkit ...

  3. OnExit事件 OnChange事件

    procedure TSetParkForm.edtPrePosExit(Sender: TObject); // 焦点移开 或已操作 begin if (G2.RowCount > 0) an ...

  4. CRC-32 校验算法

      crc32的头文件 ===========================分割线=========================== //crc32.h #ifndef _CRC32_H #de ...

  5. [SinGuLaRiTy] 2017 百度之星程序设计大赛 初赛A

    [SinGuLaRiTy-1036] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 小C的倍数问题 Time Limit: 2000/100 ...

  6. HDU6318-2018ACM暑假多校联合训练2-1010-Swaps and Inversions-树状数组

    本题题意是,给你一个长度为n的序列,使用最少的操作把序列转换为从小到大的顺序,并输出操作数*min(x,y) 实质上是算出该序列中有多少逆序对,有归并排序和树状数组两种算法,由于数据之间的差值有点大, ...

  7. eclipse搭建maven project的spring4 spring mvc mybatis

    一,先确定已经安装好了Eclipse Java EE IDE for Web Developers我用的是如下版本 Version: Neon.3 Release (4.6.3)Build id: 2 ...

  8. [CQOI2006]凸多边形（半平面交）

    很明显是一道半平面交的题. 先说一下半平面交的步骤: 1.用点向法(点+向量)表示直线 2.极角排序,若极角相同,按相对位置排序. 3.去重,极角相同的保留更优的 4.枚举边维护双端队列 5.求答案 ...

  9. 百度编辑器 Ueditor使用记录

    Ueditor官网: http://fex.baidu.com/ueditor/#dev-bale_width_grunt UeditorAPI文档: https://ueditor.baidu.co ...

  10. SDUT OJ 数据结构实验之图论六：村村通公路（最小生成树）

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...