小编我抛出一个问题:

有一个 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. leetcode-268-Missing Number(异或)

    题目描述: Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is ...

  2. PlistBuddy简单使用

    PlistBuddy简单使用 由于PlistBuddy并不在Mac默认的Path里,所以我们得通过绝对路径来引用这个工具: 查看帮助 /usr/libexec/PlistBuddy --help 下面 ...

  3. 无比迅速敏捷地开发iOS超精美控件

    目录 前言 设计 编码 PaintCode 前言 自从人生第一篇博客<iOS中的预编译指令的初步探究>问世以来 浏览量竟然达到了360多,(路过的大神勿笑!)这些浏览量使我兴奋异常但又令我 ...

  4. ArrayList分析

    ArrayList概述 ArrayList继承了AbstractList,实现了List接口,底层基于动态数组,容量大小可以动态变化,ArrayList中可以添加null元素,另外,ArrayList ...

  5. Great Expectations

    Dear friend, This game is created based on Dicken's Great Expectations. To colorful the contents, I ...

  6. HttpURLConnection发送GET、POST请求

    HttpURLConnection发送GET.POST请求 /** * GET请求 * * @param requestUrl 请求地址 * @return */ public String get( ...

  7. JavaScript《一》

    脚本语言概念:不需要提前编译的,即时执行的语言,如js,t-sql等 在一个js块中,只要有一个语句出现错误,整个块都不执行 强类型:在编译时就已经确定的类型,弱类型,在运行时,编译器自动根据赋值在确 ...

  8. Mac下用Launchd实现使用rc.local执行开机启动命令

    其实原理很简单,使用Launchd创建一个开机启动的服务,然后这个服务关联/etc/rc.local文件,那么接下来操作rc.local就和Linux下一样的了. 当然,这种思路还可以直接使用在~/. ...

  9. 四大组件之BroadcastReceiver

    BroadcastReceiver,顾名思义就是“广播接收者”的意思,它是Android四大基本组件之一,这种组件本质上是一种全局的监听器,用于监听系统全局的广播消息.它可以接收来自系统和应用的的广播 ...

  10. python-select异步IO

    #实现多任务在同一个线程切换 #!/usr/bin/python from socket import * from select import * from time import ctime so ...