小编我抛出一个问题:

有一个 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. Dubbo自定义日志拦截器

    前言 上一篇文章 Spring aop+自定义注解统一记录用户行为日志 记录了 web层中通过自定义注解配合Spring aop自动记录用户行为日志的过程.那么按照分布式架构中Dubbo服务层的调用过 ...

  2. day3.python 学习之列表

    python中列表用[ ]表示, list =  [ ] #表示一个空列表 1.list = [ 'A','B','C',‘D’] print(list[0]) # 表示打印出列表中的第一个元素,列表 ...

  3. FJWC2019 最短路

    题目描述 有一张无向图,开始的时候所有边权为1,所有点没有权值,现在给定一个整数k,表示可以将k个点的点权设置为1,求点0到n-1的最短路最长是多少 Solution 网络流好题[然而本蒟蒻还是不会] ...

  4. 【Alpha】Phylab 展示博客

    目录 Phylab Alpha 展示博客 一.团队简介 二.项目目标 2.1 典型用户 2.2 功能描述 2.3 用户量 三.项目发布与展示 3.1 新功能 3.2 修复缺陷 3.3 问题与限制 3. ...

  5. 树形DP学习笔记

    树形DP 入门模板题 poj P2342 大意就是一群职员之间有上下级关系,每个职员有一个快乐值,但是只有在他的直接上级不在场的情况下才会快乐.求举行一场聚会的快乐值之和的最大值. 求解 声明一个数组 ...

  6. 洛谷 P2014 选课(树形背包)

    洛谷 P2014 选课(树形背包) 思路 题面:洛谷 P2014 如题这种有依赖性的任务可以用一棵树表示,因为一个儿子要访问到就必须先访问到父亲.然后,本来本题所有树是森林(没有共同祖先),但是题中的 ...

  7. .NET 知识点总结

    对于Web系统开发来说,Net其实也是有好多知识点需要学的,虽然目前JAVA是主流,就业市场比较大,但Net也在积极的拥抱开源,大Net Core 2 出来了,这无疑给Net开发者带来更大的希望,好了 ...

  8. trace跟踪代码运行

    System.Diagnostics命名空间中. 1.Trace.Assert(a==12,"等于就不输出,不等于弹出对话框");   名称 描述   Assert(Boolean ...

  9. JavaScript设计模式-6.封装

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 大数乘法的C代码实现

    在C语言中,宽度最大的无符号整数类型是unsigned long long, 占8个字节.那么,如果整数超过8个字节,如何进行大数乘法呢? 例如: $ python Python 2.7.6 (def ...