小编我抛出一个问题:

有一个 div#wrapper 元素,高、宽度都未知。它其中有一个宽高都为 100px 的 div#box 元素,请你完成 CSS,使得 div#box 在 div#wrapper 内水平、垂直方向居中。

和你们讲讲一些方法:

  1. flex类型

2、position类型

还有table-cell你们就自己去尝试吧,

---------------------------------------------------------分割线---------------------------------------------------

小编码字找图不易,希望小编的分享能对大家有所启发。大家有不同的意见或建议可以在下面的留言区跟我交流。

觉得好可以关注,后续还有继续推文噢~ 

  赞赏小编一个跳跳糖~~~

如何使DIV居中的更多相关文章

  1. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  2. 利用position absolute使div居中

    外层DIV{position:realtive}内层DIV{positon:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px ...

  3. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  4. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  5. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  6. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  7. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  8. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

  9. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

随机推荐

  1. QuantLib 金融计算——随机过程之 Heston 过程

    目录 QuantLib 金融计算--随机过程之 Heston 过程 Heston 过程 参考文献 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之 H ...

  2. 【算法笔记】B1025 反转链表

    1025 反转链表 (25 分)   给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6 ...

  3. [转] CDH6 安装文章链接收集

    CentOS 7下Cloudera Manager及CDH 6.0.1安装过程详解 http://blog.51cto.com/wzlinux/2321433?source=dra Cloudera ...

  4. 微信 oauth 登录 ,回调两次,一个坑,记录一下。

    在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...

  5. (转载)Android xml资源文件中@、@android:type、@*、?、@+引用写法含义以及区别

    原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...

  6. Mac 10.12安装VirtualBox

    说明:用VirtualBox主要是能开无缝模式. 下载: (链接: https://pan.baidu.com/s/1i5y78Ct 密码: e3bq)

  7. 【Maven学习】maven中依赖的配置详解

    根元素project下的dependencies可以包含一个或者多个dependency元素,以声明一个或多个项目依赖.每个依赖可以包含的元素有: groupId,artifactId和version ...

  8. jQuery $(document).ready()和JavaScript window.onload()事件的区别

    一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...

  9. ANR机制

    1.什么是ANR(Application Not Responding) 在Android中,应用程序的响应性是由ActivityManager和WindowManager系统服务监视的.当监测到以下 ...

  10. mysql exceeded the 'max_questions' resource 记录

    最近Hive Meta的  Mysql 常报错 'user' has exceeded the 'max_questions' resource (current value: 10000) 解决:调 ...