小div在大div中居中的方法

原创 2018年04月17日 10:35:47

案例前提:大小div均有固定宽高

方法一:

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
}
.child {
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: red;
}

方法二:

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
.child {
            width:200px;
            height:200px;
            background-color: red;
        }

方法三:

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
.child {
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        }

方法四:

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
.child {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%,
再根据实际长度将子元素上左挪回一半大小*/
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top:-100px;
            background-color: red;
        }
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79971239

小div在大div里面水平垂直都居中的实现方法

关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种。 首先看一下要实现的效果图及对应的html代码: div class="parent"> ...
  • buyaoxx
  • buyaoxx
  • 2017-09-05 13:45:48
  • 688

div+css 怎么让一个小div在另一个大div里面 垂直居中

方法1: .parent {           width:800px;           height:500px;           border:2px solid #000;   ...
  • hunannanhu
  • hunannanhu
  • 2016-01-08 13:40:21
  • 7246

解决大div没有报包含小div的问题

上面是HTML代码 解决办法:在css中给class=“zhengti”加上overflow:auto;即可。还有就是加上浮动也是可以的不过会乱布局。 如果有大神知道其他方法说说看!!...
  • weixin_38544803
  • weixin_38544803
  • 2017-06-02 15:36:54
  • 348

如何在一个div中使其子div居中

网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助。 ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦。 假设父div的类名为father,子div的类名为...
  • u012088576
  • u012088576
  • 2017-03-30 10:07:17
  • 12356

css3实现div中的input表单垂直居中 display:flex

姓名 .entrust_pub{ display: -webkit-flex; display: flex; -webkit-align-items: center; align...
  • DeBruyne
  • DeBruyne
  • 2017-05-24 16:12:10
  • 1841

让嵌套div里面垂直居中

 .con{  width:200px;  height:48px;  background:#CCCCCC; overflow:hidden;/*/清楚浮动*/ 这句是必须的 }  ....
  • kpbiao87
  • kpbiao87
  • 2010-12-23 12:38:00
  • 1423

多个DIV,并排居中

1.CSS .main{display:-webkit-box;display:-moz-box;width:100%;} .left{width:120px;background-color:...
  • snowflake5
  • snowflake5
  • 2015-07-27 22:18:45
  • 778

将大图片完整的放到小div里

将一个比较大的图片插入到一个较小的div里可能会导致图片溢出。 如果想将图片完整的插入到div里,只需在css中给img设置:width:100%;height:100%;即可。...
  • xubingnan123
  • xubingnan123
  • 2017-11-26 23:22:05
  • 385

使用BootStrap,Div一小部分的居中方法.

.col-center-block {             float: none;             display: block;             margin-left: au...
  • QQ459932400
  • QQ459932400
  • 2017-02-21 21:57:37
  • 367
收藏助手
不良信息举报
您举报文章:小div在大div中居中的方法
举报原因:
原因补充:

(最多只允许输入30个字)