不定宽高垂直居中分析,垂直居中

不定宽高垂直居中解析,垂直居中分析

  前些天做活动项目是,碰着这么八个案例,如图,图片容器随着视口宽度实行率性拉伸增添,图片不定宽高,垂直居中:

www.301.net 1

  当时做这么些布局的时候,自己一贯想到用display:table-cell通过vertical-align:middle,来贯彻居中,能够当自家在同二个节点用position:absolute,会促成此居中难点失效。

  最终想到的缓和方案,案比如下,不定宽高垂直居中:

www.301.net 2

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

    <style type="text/css">
        p{margin:0;padding:0}
        .wrap,.wrap1{
            width:30%;
            padding-top:30%;
            background:#eee;
            position:relative;
        }
        .wrap p,.wrap1 p{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
        .wrap p img{
            max-width:100%;
            max-height:100%;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform-origin:50% 50%;
            -webkit-transform:translate3d(-50%,-50%,0);
        }
        .wrap1 p{text-align:center;font-size:0;}
        .wrap1 p:after{
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
            content:"";
        }
        .wrap1 p img{
            display:inline-block;
            max-width:100%;
            max-height:100%;
            vertical-align:middle;
            margin:0 auto;
        }        
    </style>
</head>
<body>
    <h2>第一种方案</h2>
    <div class="wrap">
        <p>
            <img src="img/download.jpg" alt="www.301.net 3" />
        </p>
    </div>
    <h1>111</h1>
    <div class="wrap">
        <p>
            <img src="img/download1.jpg" alt="www.301.net 4" />
        </p>
    </div>


    <h2>第二种方案</h2>
    <div class="wrap1">
        <p>
            <img src="img/download.jpg" alt="www.301.net 5" />
        </p>
    </div>
    <h1>111</h1>
    <div class="wrap1">
        <p>
            <img src="img/download1.jpg" alt="www.301.net 6" />
        </p>
    </div>    

    <div id="demo">
    <p>水平垂直居中的随意内容</p>
</div>    
</body>
</html>

  

  下边大家将各自介绍三种垂直居中的应用方案:

  已咀嚼一下在此之前的多少个老知识点:

  1.等级次序居中级知识分子识点

text-align:center

  对于水平居中或许不要求太多的介绍,全体主流浏览器均扶助 text-align 属性,只要求取值
center 就可以;

  2.vertical-align知识点

vertical-align适用于 inline level, inline-block level 及 table-cells 元素上

  全数主流浏览器均帮忙 vertical-align 属性,所以利用该属性来完结垂直居中是二个不错的主张;

  一、利用display:table-cell;vertical-align:middle;实行不定中度,垂直居中
例子demo

<div id="demo">
 <p>水平垂直居中的随意内容</p>
</div>
#demo{
 display:table;
 width:500px;
 margin:10px auto;
 background:#eee;
}
#demo p{
 display:table-cell;
 height:100px;
 vertical-align:middle;
}

   既然table能落成,自然也就能够想到将 display
设置为table系value来完结。当然,该方案是有局限性的,因为IE8以下的浏览器不扶助 display 的table系value,所以您只可以在IE8及以上浏览器以及非IE浏览器下能力看到功效;

  二、利用display:table-cell;vertical-align:middle;进行不定中度,垂直居中
 例子DEMO

<div id="demo">
    <p>水平垂直居中的随意内容</p>
</div>
#demo{
    height:100px;
    text-align:center;
}
#demo:after{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    content:'';
}
#demo p{
    display:inline-block;
    vertical-align:middle;
}

  这里有几许索要充裕专心:参照以上代码,要是我们的原委容器p的宽度为百分百时,就能招致#demo:after被挤出不在一行,这几个是出于inline成分间隔导致的,能够安装font:0清除,假如为了保证全包容,可以毫无伪类,使用span标签去代替。

  完美建设方案:例子demo

<div id="demo">
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!--[if lt IE 8]><![endif]-->
</div>
#demo{
    height:100px;
    text-align:center;
    font-size:0;  //注意这里是去除文字间隔,放在内容宽度为100%时挤出换行
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}

  三、利用translate3d(-二分之一,-二分之一,0)达成垂直居中,只协助高版本

    <style type="text/css">
        .main{width:600px;height:600px;position:relative}
        .box{position:absolute;top:50%;left:50%;-webkit-transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0)}
    //原理有点跟 top:50%;left:50%;margin:-height/2 0 0 -width/2类似,这种是要知道高度,但是这个不需要
    </style>

    <div class="main">
        <div class="box">555666</div>
    </div>

  四、利用两级嵌套,一回left,top达成居中

<style type="text/css">
html,body{width: 100%; height: 100%; margin: 0; padding: 0;}
.wrp{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.5);}
.box{position: absolute; left: 50%; top: 50%;}
.box2{position: relative; left: -50%; top: -50%; background-color: #f60000; color: #fff; padding: 10px;}
</style>

<div class="wrp">
 <div class="box">
  <div class="box2">
   sssssfdsfd
  </div>
 </div>
</div>

  利用五个不定宽高的div相嵌。外围的div用absolute定位,left:四分之二,top:二分之一。那样外围的div的左上角处于水平垂直居中状
态。内部的div使用relative定位,那样能够利用本身的宽高撑开外围的div,再用left:-百分之五十,top:-百分之五十;(用margin-
left,margin-top也足以,就是使用取值的是参谋外围div的宽高的规律)实现内部div的几何中央与外面的div左上角重合。那样达成了垂
直水平剧中。这几个规律有点像使用translate(-十分之五,-二分一)来促成程度垂直居中,但是小编用的是css1.0的代码,所以包容性很好
IE6.0~IE11 chrome,firefox都可以

 

  资料参谋:

    未知尺寸成分水平垂直居  

 

昨日做活动项目是,碰到那样三个案例,如图,
图片容器随着视口宽度进行大肆拉伸扩大,图片不…

  后日做活动项目是,遭受那样一个案例,如图,图片容器随着视口宽度实行任意拉伸扩充,图片不定宽高,垂直居中:

www.301.net 7

www.301.net 8

图片.png

  当时做那一个布局的时候,自己直接想到用display:table-cell通过vertical-align:middle,来落到实处居中,能够当本身在同三个节点用position:absolute,会招致此居中问题失效。

www.301.net 9

  最终想到的消除方案,案举个例子下,不定宽高垂直居中:

图片.png

www.301.net 10

1,父容器设置padding:20px 0;

急需:父容器中度自适应,设置内div垂直居中
完毕:设置内div的padding上下等距

www.301.net 11

图片.png

www.301.net 12

图片.png

(2)父容器和子div

www.301.net 13

图片.png

代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

    <style type="text/css">
        p{margin:0;padding:0}
        .wrap,.wrap1{
            width:30%;
            padding-top:30%;
            background:#eee;
            position:relative;
        }
        .wrap p,.wrap1 p{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
        .wrap p img{
            max-width:100%;
            max-height:100%;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform-origin:50% 50%;
            -webkit-transform:translate3d(-50%,-50%,0);
        }
        .wrap1 p{text-align:center;font-size:0;}
        .wrap1 p:after{
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
            content:"";
        }
        .wrap1 p img{
            display:inline-block;
            max-width:100%;
            max-height:100%;
            vertical-align:middle;
            margin:0 auto;
        }        
    </style>
</head>
<body>
    <h2>第一种方案</h2>
    <div class="wrap">
        <p>
            <img src="img/download.jpg" alt="www.301.net 14" />
        </p>
    </div>
    <h1>111</h1>
    <div class="wrap">
        <p>
            <img src="img/download1.jpg" alt="www.301.net 15" />
        </p>
    </div>


    <h2>第二种方案</h2>
    <div class="wrap1">
        <p>
            <img src="img/download.jpg" alt="www.301.net 16" />
        </p>
    </div>
    <h1>111</h1>
    <div class="wrap1">
        <p>
            <img src="img/download1.jpg" alt="www.301.net 17" />
        </p>
    </div>    

    <div id="demo">
    <p>水平垂直居中的随意内容</p>
</div>    
</body>
</html>

2,相对定位

必要:父容器定高(或自适应),内div宽高自适应,完结内div垂直居中

  

1)设置负margin,包容全部浏览器,但不响应(只变动dialog的宽高,达不到居中功用)

www.301.net 18

图片.png

www.301.net 19

图片.png

代码
www.301.net,总结:
优点:兼容IE
症结:内div宽高更换,要求手动更换margin-left和margin-top的负值

  上边我们将独家介绍两种垂直居中的实施方案:

2)使用css3的transform:translate(-百分之五十,-一半),不相称全体浏览器,但响应

www.301.net 20

图片.png

www.301.net 21

图片.png

www.301.net 22

图片.png

相对定位,css3的transform:translate(-十分之五,-二分之一)
总结:
可取:改造内div的宽高,不用手动改造margin-top和margin-left的负值
缺点:不兼容IE

  已咀嚼一下在先的多少个老知识点:

3,margin:auto 设置水平垂直都从中

  1.程度居中级知识分子识点

4,增加八个帮助div,设置基准线对齐情势 vertical-align

text-align:center
vertical-align可对行内成分和表格成分设置垂直对齐格局

  对于水平居中只怕无需太多的牵线,全数主流浏览器均援救 text-align 属性,只须要取值
center 就能够;

行内成分

www.301.net 23

图片.png

www.301.net 24

图片.png

www.301.net 25

图片.png

行内成分对齐

  2.vertical-align知识点

5,关于table

vertical-align适用于 inline level, inline-block level 及 table-cells 元素上
(1)纯table落成,html-table 利用table-tr-td中table自带的垂直居中

要求:table定高,不选拔vertical-align,使内部的div(宽高自适应)垂直居中

www.301.net 26

图片.png

代码
总结:
亮点:包容全部IE浏览器
缺欠:table布局已近过时

  全数主流浏览器均帮忙 vertical-align 属性,所以利用该属性来实现垂直居中是八个没有什么可争辨的的主见;

(2)div模拟table,表格成分(div-display:table/table-row/table-cell)

  一、利用display:table-cell;vertical-align:middle;举行不定中度,垂直居中
例子demo

1)div>img 使img垂直居中

要求:包裹层定高,img达成垂直居中
福寿无疆思路:
1)包裹层设置display:table-cell
2)包裹层设置vertical-align:middle

www.301.net 27

图片.png

www.301.net 28

图片.png

<div id="demo">
    <p>水平垂直居中的随意内容</p>
</div>
#demo{
    display:table;
    width:500px;
    margin:10px auto;
    background:#eee;
}
#demo p{
    display:table-cell;
    height:100px;
    vertical-align:middle;
}
2)div>div

急需:div里面包裹着一个div(contain),包裹层定高,contain宽高自适应,使contain垂直居中与包裹层
金玉锦绣首要点:
1)div父包裹层模拟 table-cell(列)
2)列定高
3)vertical-align:middle

www.301.net 29

图片.png

代码

   既然table能完结,自然也就能想到将
display
设置为table系value来完毕。当然,该方案是有局限性的,因为IE8以下的浏览器不帮忙 display 的table系value,所以您只好在IE8及以上浏览器以及非IE浏览器下手艺看到作用;

5,试出来的法子:margin:auto;

必要:父容器定高,子容器定高定宽,完结自容器水平垂直居中
完结中央:
(1)父容器(position:relative),子容器(position:absolute)
(2)父容器定高,子容器定高定宽
(3)子容器设置top,bottom,right,left都为0
(4)子容器设置 margin水平垂直都为auto

www.301.net 30

图片.png

代码

  二、利用display:inline-block;vertical-align:middle;进行不定高度,垂直居中
 例子DEMO

<div id="demo">
    <p>水平垂直居中的随意内容</p>
</div>
#demo{
    height:100px;
    text-align:center;
}
#demo:after{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    content:'';
}
#demo p{
    display:inline-block;
    vertical-align:middle;
}

  这里有几许急需非常注意:参照以上代码,即使大家的开始和结果容器p的宽窄为百分百时,就能够变成#demo:after被挤出不在一行,这么些是由于inline元素间隔导致的,能够安装font:0免去,若是为了维持全包容,可以绝不伪类,使用span标签去代替。

  完美实施方案:例子demo

<div id="demo">
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!--[if lt IE 8]><![endif]-->
</div>
#demo{
    height:100px;
    text-align:center;
    font-size:0;  //注意这里是去除文字间隔,放在内容宽度为100%时挤出换行
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}

  三、利用translate3d(-六分之三,-一半,0)达成垂直居中,只接济高版本

    <style type="text/css">
        .main{width:600px;height:600px;position:relative}
        .box{position:absolute;top:50%;left:50%;-webkit-transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0)}
    //原理有点跟 top:50%;left:50%;margin:-height/2 0 0 -width/2类似,这种是要知道高度,但是这个不需要
    </style>

    <div class="main">
        <div class="box">555666</div>
    </div>

  四、利用两级嵌套,一次left,top达成居中

<style type="text/css">
html,body{width: 100%; height: 100%; margin: 0; padding: 0;}
.wrp{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.5);}
.box{position: absolute; left: 50%; top: 50%;}
.box2{position: relative; left: -50%; top: -50%; background-color: #f60000; color: #fff; padding: 10px;}
</style>

<div class="wrp">
    <div class="box">
        <div class="box2">
            sssssfdsfd
        </div>
    </div>
</div>

  利用四个不定宽高的div相嵌。外围的div用absolute定位,left:八分之四,top:二分之一。那样外围的div的左上角处于水平垂直居中状
态。内部的div使用relative定位,那样能够利用自己的宽高撑开外围的div,再用left:-二分之一,top:-二分一;(用margin-
left,margin-top也得以,就是使用取值的是参照他事他说加以考察外围div的宽高的原理)完成内部div的几何宗旨与外部的div左上角重合。那样达成了垂
直水平剧中。这些规律有一点像使用translate(-四分之二,-六分之三)来促成程度垂直居中,不过小编用的是css1.0的代码,所以兼容性很好
IE6.0~IE11 chrome,firefox都可以

   五、使用 box-align and box-pack
属性居中,必需在
box-align调控垂直方向,box-pack水平方向,可是这种只好在display:box弹性盒子容器下行使**

  兼容性,firefox,chrome,ios7以上,andriod4.0以上

  亲测:HTCMI2CS、NokiaMI3/三星魅蓝note、荣耀6、iphone4s、iphone6 plus
通过。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-dns-prefetch-control" content="on" />

<style> 
div.flexbox
{
width:350px;
height:400px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
/**水平居中**/
-webkit-box-pack:center;
/***垂直居中**/
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.box{padding:10px;background:orange}
</style>
</head>
<body>
<!---flexbox做居中--->
<h2>使用 box-align and box-pack 属性居中</h2>
<div class="flexbox">
    <div class="box">
    <p>我是居中对齐的。</p>
    <p>我不帅,我不帅。</p>
    </div>
</div>

<br />
<br />
<br />
<br />

<h2>使用 box-align and align-items 属性居中</h2>
<!---flexbox做居中--->
<div class="boxflex">
    <div class="boxlf"></div>
    <div class="box">
    <p>我是居中对齐的ss。</p>
    <p>我不帅,我不帅。</p>
    </div>
</div>
<style type="text/css">
.boxflex{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-o-box;
    display:box;
    width:350px;
    height:200px;
    -webkit-box-align:center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    
}
.boxlf{
    width:20px;
    height:100%;
    background:red;
}
.boxflex .box{
  /*display:block;*/
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

</style>
<p><b>注释:</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

   

  资料参谋:

    未知尺寸成分水平垂直居  

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注