首先父盒子包住子盒子

<body>

<div class="outbox">

    <div class="box"></div>

</div>

</body>

方法一：设置距父盒子的margin-top/margin-left为父盒子宽度或长度-子盒子宽度或长度一半

<style>

        *{

            padding: 0;

            margin: 0;

        }

        .outbox{

            width:100px;

            height: 100px;

            background: chartreuse;

            border: 1px solid black;

            margin: auto;

        }

        .box{

            width: 50px;

            height: 50px;

            background: red;

            margin-top: 25px;

            margin-left: 25px;

        }

 </style>

方法二：绝对定位距左距上50%  margin-top和margin-left 各为负的宽高一半拉回来

<style>

        *{

            padding: 0;

            margin: 0;

        }

        .outbox{

            width:100px;

            height: 100px;

            background: chartreuse;

            border: 1px solid black;

            margin: auto;

            position: relative;

        }

        .box{

            width: 50px;

            height: 50px;

            background: red;

            position: absolute;

            left:50%;

            top:50%;

            margin-left: -25px;

            margin-top: -25px;

        }

    </style>

方法三：magin:auto  absolute然后距离左右上下都为0

 <style>

        *{

            padding: 0;

            margin: 0;

        }

        .outbox{

            width:100px;

            height: 100px;

            background: chartreuse;

            border: 1px solid black;

            margin: auto;

            position: relative;

        }

        .box{

            width: 50px;

            height: 50px;

            background: red;

            position: absolute;

            margin: auto;

            top:0;

            left:0;

            bottom:0;

            right:0

        }

    </style>

方法四：利用table-cell（注意：只能用于ie8及其以上）属性 将父元素表格形式呈现 vertical-align显示为上下居中middle

 <style>

        *{

            padding: 0;

            margin: 0;

        }

        .outbox{

            width:100px;

            height: 100px;

            background: chartreuse;

            border: 1px solid black;

            margin: auto;

            display: table-cell;

            vertical-align: middle;

        }

        .box{

            width: 50px;

            height: 50px;

            background: red;

            margin: auto;

        }

    </style>

 方法五：弹性布局居中 align-item:center垂直居中  justify-content:水平居中

 <style>

        *{

            padding: 0;

            margin: 0;

        }

        .outbox{

            width:100px;

            height: 100px;

            background: chartreuse;

            border: 1px solid black;

            margin: auto;

            display:flex;

            align-items: center;

            justify-content: center;

        }

        .box{

            width: 50px;

            height: 50px;

            background: red;

        }

    </style>

 绝对定位的方式fixed可以如法炮制；当然我认为也可以用display:inline-block

css盒子垂直居中的更多相关文章

  1. css 盒子垂直居中

    面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做.其实之前,我就会两种,line-height和table-cell,今天做项目,遇到了这个问题,就系统的查了一下,总结一下方法: 1 ...

  2. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  3. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  4. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  5. html中元素盒子垂直居中的实现方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. css盒子模型基础，margin-top塌陷，元素溢出

    现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接   一. 初识盒子模型   例子1,测试盒子各属性设置   <head> <s ...

  7. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  8. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  9. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

随机推荐

  1. (转)tomcat+nginx+redis实现均衡负载、session共享(一)

    在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一些状况: 1.用户还在操作,被强迫终止了(我们可以看日志等没人操作的时候更新,但总可能会有万一) ...

  2. VS项目属性的一些配置项的总结（important）

    以下内容为“原创”+“转载” 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fan ...

  3. mongo转换副本集

    本文介绍如何把独立的mongo实例转换成包含3个成员的副本集.开发和测试使用独立实例,生产使用副本集.如何安装独立的mongo实例本文不再赘述. 如果在部署副本集时还没有安装mongo实例,可以查看部 ...

  4. jvm内存模型(运行时数据区)

    运行时数据区(runtime data area) jvm定义了几个运行时数据区,这些运行时数据区存储的数据,供开发者的应用或者jvm本身使用.按线程共享与否可以分为线程间共享和线程间独立. 线程间独 ...

  5. bzoj千题计划153：bzoj2431: [HAOI2009]逆序对数列

    http://www.lydsy.com/JudgeOnline/problem.php?id=2431 dp[i][j] 表示i的排列,有j个逆序对的方案数 加入i+1,此时i+1是排列中最大的数, ...

  6. Elasticsearch技术解析与实战（四）shard&replica机制

    序言 shard&replica机制 1.index包含多个shard 2.每个shard都是一个最小工作单元,承载部分数据,lucene实例,完整的建立索引和处理请求的能力 3.增减节点时, ...

  7. iOS二维码扫描的实现(Swift)

    随着二维码的普遍使用,二维码扫描也成为了很多app的一个基本功能,本篇主要来介绍一下如何实现一个简单的二维码扫描功能.本文使用了XCode自带的AVFoundation 库,利用Swfit语言实现. ...

  8. 通过微信公众号ID生成公众号的二维码

    username为公众号id http://open.weixin.qq.com/qr/code/?username=wyjiaolian

  9. undefined reference to 'pthread_create'问题解决 -- 转

    文章出处:http://blog.csdn.net/llqkk/article/details/2854558 由于是Linux新手,所以现在才开始接触线程编程,照着GUN/Linux编程指南中的一个 ...

  10. HDU 1718 Rank 排序

    解题报告:给一个班的学生的分数排序,然后判断Jack在他们班级的排名是多少,并且有如下规定,若多个人的分数相同,则他们的排名也 是相同的.说白了就是问这个班上分数比Jack高的人数有多少个,如果有n个 ...