精华内容
下载资源
问答
  • div水平垂直居中方法方法1.这也是绝大多数网友使用的方法 <div class="fa"> <div class="left1"> </div> </div> /...

    div水平垂直居中方法

    方法1.这也是绝大多数网友使用的方法
    这里写图片描述

    <div class="fa">
        <div class="left1">
    
        </div>
    </div>
    //-----------样式-----------------
            .fa{
                position:relative;
                width: 100%;
                height: 2rem;
                background-color:red;
            }
            .left1{
                position:absolute;
                width: 1.5rem;
                height: 1.5rem;
                top:50%;
                left:50%;
                margin-left:-0.75rem;
                margin-top:-0.75rem;
                background-color: #000000;
            }
    (这种方法能够实现水平垂直居中,但样式代码太多了)

    方法1的升级写法,使用calc();(个人比较推荐的写法!)
    .left1{
    position:absolute;
    width: 1.5rem;
    height: 1.5rem;
    top:calc(50% - 0.75rem);
    left:calc(50% - 0.75rem);
    background-color: #000000;
    }
    注意:1.calc()的表达式中运算符两边必须要有空格。
    说明:left:calc(50% - 0.75rem)中的0.75rem是指需要水平垂直居中的div的宽或高的一半;50%是指父级容器的50%,及一半,这里的父级容器的宽度为100%;
    同理:top:calc(50% - 0.75rem)就不在说明。
    方法2.
    这里写图片描述

        <div class="fa2">
            <div class="left2">
    
            </div>
        </div>
        //-----------样式-----------------
            .fa2{
                width: 100%;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: yellow;
            }
            .left2{
                width: 1.5rem;
                height: 1.5rem;
                background-color: green;
            }

    第二种方法是直接在父盒子中写样式


    为了能及时的将自己踩到的前端坑分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(front_e_family)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!
    这里写图片描述

    展开全文
  • 代码: <div class="father"> <div class="son">...div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 兼容性:,IE7及之前版本不支持  .father{  width:400p...

     

    代码:

    <div class="father">
    <div class="son">
    </div>
    </div>

     

    方案一:

    div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,

    兼容性:,IE7及之前版本不支持

     
        .father{
            width:400px;
            height:400px;
                  background: red;
            position:relative;  /* 或者position:absolute;*/
        }
        .son{
                width: 200px;
                height: 200px;
                background: green;
                position:absolute;
                left:0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }

     

    优点:

    • 简单

    缺点:

    • IE(IE8 beta)中无效
    • 无足够空间时,.son 被截断,但是不会有滚动条出现

     

    方案二:

    div绝对定位水平垂直居中【margin 负间距】     这或许是当前最流行的使用方法

        .father{
            width:400px;
            height:400px;
                  background: red;
            position:relative;  /* 或者position:absolute;*/
        }
             .son{
                width:200px;
                height: 200px;
                background:green;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
            }        

     

    优点:

    • 适用于所有浏览器
    • 不需要嵌套标签

    缺点:

    • 没有足够空间时,.son会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)

     

    方案三:

    div绝对定位水平垂直居中【Transforms 变形】

    兼容性:IE8不支持;

        .father{
            width:400px;
            height:400px;
                  background: red;
            position:relative;  /* 或者position:absolute;*/
        }

    .son{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }

     

     不定宽高的的水平垂直居中

    方案四:

    css不定宽高水平垂直居中,CSS3属性

         .father{
            width:?px;
            height:?px;
                  background: red;
           display:flex;
                justify-content:center;
                align-items:center;
                   /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
            }
            .son{
                background: green;
                width: ?px;
                height: ?px;
            }

     

     

     

    方案五:

    将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

         .father{
            width:?px;
            height:?px;
                  background: red;

            display: table-cell;
            vertical-align: middle;

            }
            .son{
                background: green;
                width: ?px;
                height: ?px;
           margin: auto; }

    或者
         .father{
            width:?px;
            height:?px;
                  background: red;

            display: table-cell;
            vertical-align: middle;

            text-align:center;

            }
            .son{
                background: green;
                width: ?px;
                height: ?px;
           display:inline-block; }

     

    优点:

    .son 可以动态改变高度(不需在 CSS 中定义),.son 不会被截断

    缺点:

    Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签

     

    方案六:

    对子盒子实现绝对定位,利用calc计算位置

      .box {
        position: relative;
       }

      .div {
        width: 200px;
        height: 200px;
        background: green;
        position: absolute;
        left: -webkit-calc((400px - 200px)/2);
        top: -webkit-calc((400px - 200px)/2);
        left: -moz-calc((400px - 200px)/2);
        top: -moz-calc((400px - 200px)/2);
        left: calc((400px - 200px)/2);
        top: calc((400px - 200px)/2);
      }

     

    转载于:https://www.cnblogs.com/mslalan/p/8109901.html

    展开全文
  • div水平垂直居中方法汇总(共六种)

    千次阅读 2020-06-30 23:31:17
    文章目录第一种第二种第三种第四种第五种第六种 第一种 绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: ...水平垂直居中方式1</title>

    第一种

    绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式1</title>
        <style>
            /*使用绝对定位,不确定子div的宽高,父元素需要添加position:relative*/
            .father {
                background: red;
                position: relative;
                width: 500px;
                height: 500px;
            }
            .son {
                background: green;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son">hello simon</div>
    </div>
    </body>
    </html>
    

    1.png

    第二种

    绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式2</title>
        <style>
            /*使用绝对定位,确定了子div的宽高,margin值为子div宽高的一半的负值*/
            .father {
                background: red;
                position: relative;
                width: 500px;
                height: 500px;
            }
            .son {
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son">hello simon</div>
    </div>
    </body>
    </html>
    

    2.png

    第三种

    绝对定位方法:绝对定位下top left right bottom 都设置0 ,margin设置为auto

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式3</title>
        <style>
            /*使用绝对定位,确定了子div的宽高,left、right、top、bottom都设置为0,margin设置为auto*/
            .father {
                background: red;
                position: relative;
                width: 500px;
                height: 500px;
            }
            .son {
                width: 200px;
                height: 200px;
                background: green;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son">hello simon</div>
    </div>
    </body>
    </html>
    

    3.png

    第四种

    flex布局方法:当前div的父级添加flex css样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式4</title>
        <style>
            /*使用flex布局,为父div添加flex布局样式align-items和justify-content*/
            .father {
                background: red;
                position: relative;
                width: 500px;
                height: 500px;
    
                -webkit-display: flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                -webkit-justify-content: center;
                justify-content: center;
            }
            .son {
                width: 200px;
                height: 200px;
                background: green;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son">hello simon</div>
    </div>
    </body>
    </html>
    

    4.png

    第五种

    table-cell实现水平垂直居中: table-cell middle center组合使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式5</title>
        <style>
            /*table-cell、vertical-align、text-align组合使用*/
            /*子div只能不能是块状元素,否则只能垂直居中,无法水平居中*/
            .father {
                width: 500px;
                height: 500px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                background-color: red;
            }
            .son {
                width: 200px;
                height: 200px;
                background-color: green;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son">hello simon</div>
    </div>
    </body>
    </html>
    

    5.png

    第六种

    绝对定位:calc() 函数动态计算实现水平垂直居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平垂直居中方式6</title>
        <style>
            .father {
                position: relative;
                border: 1px solid #f40;
                background-color: #f30;
                width: 80vw;
                height: 80vh;
    
            }
            .son {
                position: absolute;
                width: 30vw;
                height: 30vh;
                background-color: #ff0;
                left: -moz-calc((80vw - 30vw)/2);
                top: -moz-calc((80vh - 30vh)/2);
                left: -webkit-calc((80vw - 30vw)/2);
                top: -webkit-calc((80vh - 30vh)/2);
                left: calc((80vw - 30vw)/2);
                top: calc((80vh - 30vh)/2);
            }
        </style>
    </head>
    <body>
    <!--绝对定位+calc()动态计算实现水平垂直居中-->
    <div class="father">
        <div class="son">
            hello simon
        </div>
    </div>
    </body>
    </html>
    

    6.png

    展开全文
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet
    展开全文
  • div水平垂直居中方法*方法1:使用JS实现:兼容全部的浏览器 //->获取当前屏幕的宽度和高度 var winW = document.documentElement.clientWidth || document.body.clientWidth, winH =
  • div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局 父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中 display:flex; justify-content:center; align-items:center; 使用CSS3 transform ...
  • DIV水平垂直居中

    2017-09-19 10:46:32
    div水平垂直居中
  • 常见的div水平垂直居中方案 div水平垂直居中是我们工作中常用需求,而且面试过程中还经常可能会被问道。但是如果没有仔细研究过得同学还真不一定能答的上来。 这里我总结了几种常见的方案,以供大家参考。 1.通过...
  • 未知宽高div水平垂直居中3种方法,div水平居中3种
  • div水平垂直居中

    2019-10-19 14:29:38
    主要记录几种div水平垂直居中的几种方式。
  • CSS的div水平垂直居中

    2021-04-01 21:00:45
    已知高度实现div水平垂直居中 一、使用flex实现已知高度的水平垂直居中 显示效果图: 二、position实现已知高度的水平垂直居中(margin 设置为其高度的负一半) 三、position已知高度实现水平垂直居中(margin...
  • 在学习大前端过程中,总结了一下元素的几种水平垂直居中方法 实现如图: 说明:前四种方法使用到的class为wrap的div都设置为{display:relative;} 1.子级设置 absolute+margin:auto,top、left、right、bottom的...
  • div水平垂直居中的六种方法

    千次阅读 多人点赞 2019-09-03 23:19:54
    方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ** ** 方法二:绝对定位方法:确定了当前div的宽度,margin值为当前...
  • 未知宽高div水平垂直居中3种方法

    万次阅读 2014-10-25 13:46:28
    未知宽高div水平垂直居中3种方法:1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式
  • 1、text-align:center实现图片水平居中text-align一般用于文本的水平居中,也可以用于图片,代码...}HTML部分:效果图:图片垂直居中1.jpg2、line-height和text-align:center实现图片的水平垂直居中设置line-heigh...
  •  引子 我们经常遇到需要把div中的内容进行水平和垂直居中。所以,这里介绍一种方法,可以使div水平居中和垂直居中。 代码: html lang="en"> ... title>div水平垂直居中title> style> *{ margin:0;
  •   网上关于div水平垂直居中的文章层出不穷,对于div水平垂直居中方法最多可至七八种,经过笔者对于一些大厂的网站的源码进行查看和研究发现他们所用到的方法无外乎以下几种,所以小伙伴们在以后的实际开发的过程...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,379
精华内容 15,751
关键字:

div水平垂直居中的方法