如何让一个div水平垂直居中

原创 2018年04月16日 16:19:19

如果一个div设置了宽高,使用绝对定位,使其水平垂直居中的方法:

法一:IE7不兼容

div{

            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;

        }

法二:div{
            width:200px;
            height: 200px;
            background:green;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }     
法三:IE8 不兼容
div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }            

在一个div中设置文字水平垂直居中的方法:

.box{
display: table;
border:1px solid black;
min-height: 300px;
        }
        .box>div{
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }   

实现div水平、垂直居中的几种方法

1、最常用的,也是最简单的(利用position定位、再用margin偏移) 实现div水平垂直居中 body{ background: #272822; } .te...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-12-28 15:10:11
  • 2230

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...
  • jingtian678
  • jingtian678
  • 2017-06-22 16:43:58
  • 1413

经典面试题:如何让DIV水平和垂直居中

CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CS...
  • zxjiayou1314
  • zxjiayou1314
  • 2015-06-24 21:36:59
  • 1030

css让一个div水平垂直居中方法大全

方法一:position加margin class="wrap"> div class="center">div> /div> /**css**/ .wrap { width: 2...
  • LittleWei929211
  • LittleWei929211
  • 2016-11-15 17:25:36
  • 243

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...
  • summer7310
  • summer7310
  • 2015-09-27 20:14:46
  • 2511

未知宽高div水平垂直居中3种方法

未知宽高div水平垂直居中3种方法:1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式...
  • rongku
  • rongku
  • 2014-10-25 13:46:28
  • 7022

使一个div在body中水平垂直居中的方法

  • tarajk05
  • tarajk05
  • 2014-11-15 13:47:51
  • 355

不定宽高的水平垂直居中实现方式

对于CSS3开发而言,不定宽高的水平垂直居中是我们经常要用到得,实现方式也有很多,下面给大家介绍一下我在众多项目中的一些实现方案,希望对大家有所帮助。 方案一: .wraper{ pos...
  • jiangbo_phd
  • jiangbo_phd
  • 2015-10-11 10:42:57
  • 4217

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

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

子元素(div)在父元素(div)里水平且垂直居中

div{             width:200px;             height:200px;             background-color:green;     ...
  • wuxianhu02
  • wuxianhu02
  • 2017-01-23 16:27:42
  • 1189
收藏助手
不良信息举报
您举报文章:如何让一个div水平垂直居中
举报原因:
原因补充:

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