精华内容
下载资源
问答
  • 文章目录方法一:对图片不管用方法二:对图片...vertical-­align垂直居中:top/middle/bottom; 1、只有行内元素设置时管用; 2、需要参照物,且参照物不要换行,紧跟在图片后同行显示; 代码示例: <head


    方法一:对图片不管用

    父元素:display:table;
    		text-align:center;//水平居中
    		
    子元素:display:table-cell;
    		vertical-align:middle;//垂直居中
    

    方法二:对图片管用

    vertical-­align垂直居中:top/middle/bottom; 
    
    	1、只有行内元素设置时管用; 
    	2、需要参照物,且参照物不要换行,紧跟在图片后同行显示;
    

    代码示例:

    <head>
    	<meta charset="utf-8">
    	<style>
    		*{margin:0;padding:0;}
    		.box{
    		    width: 400px;
    		    height: 500px;
    		    background: orange;
    		    margin:100px auto;
    		    text-align: center;//水平居中
    		}
    		.box img{
    		    vertical-align: middle;
    		}
    		span{
    		    display: inline-block;//转换为行内块元素参照物才有作用
    		    vertical-align: middle;
    		    height: 100%;
    		}
    	</style>
    </head>
    <body>
        <div class="box">
            <img src="images/mz6.jpg" alt=""><span></span>
            //参照物span不要换行
        </div>
    </body>
    

    总结

    以上是对CSS未知宽高元素水平垂直居中的小总结,后期将继续更新html基础知识点
    文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌

    展开全文
  • 方法一 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素(parent)可以动态的改变高度(table元素...未知宽高元素水平垂直居中</title>

    方法一
    思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中
    优点:父元素(parent)可以动态的改变高度(table元素的特性)
    缺点:IE8以下不支持

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    
    .parent1{
        display: table;
        height:300px;
        width: 300px;
        background-color: #FD0C70;
    }
    .parent1 .child{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }
    
    </style>
    <body>
        <div class="parent1">
            <div class="child">hello world-1</div>
        </div>
    </body>
    </html>
    

    方法二:
    思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0
    缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。
    当然也可以使用伪元素来代替span标签,不过IE支持也不好,但这是后话了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent2{
        height:300px;
        width: 300px;
        text-align: center;
        background: #FD0C70;
    }
    .parent2 span{
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    .parent2 .child{
        display: inline-block;
        color: #fff;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    
    </style>
    <body>
        <div class="parent2">
            <span></span>
            <div class="child">hello world-2</div>
        </div>
    </body>
    </html>
    

    方法三
    思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)
    优点:高大上,可以在webkit内核的浏览器中使用
    缺点:不支持IE9以下不支持transform属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent3{
        position: relative;
        height:300px;
        width: 300px;
        background: #FD0C70;
    }
    .parent3 .child{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        transform: translate(-50%, -50%);
    }
    </style>
    <body>
    <div class="parent3">
            <div class="child">hello world-3</div>
        </div>
    </body>
    </html>
    

    方法四:
    思路:使用css3 flex布局
    优点:简单 快捷
    缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent4{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height:300px;
        background: #FD0C70;
    }
    .parent4 .child{
        color:#fff;
    }
    </style>
    <body>div> <div class="parent4">
            <div class="child">hello world-4</div>
        </div>
    </body>
    </html>
    
    展开全文
  • 如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道 下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-...

    如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道


    下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中。


    一、表格方法
    表格本来对立面的内容是垂直居中的,所以用表格来做很适合。但是它里面的内容是行内元素才行,所以下面的代码就可以实现。
    <style>
    *{margin:0px; padding:0px;}
    table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
    .test {background:red; display:inline-block;}
    </style>
    <table>
    <tr>
    <td>
    <div class="test">
    水平垂直居中了吧<br>
    两行文字哦
    </div>
    </td>
    </tr>
    </table>




    在css里面有个display:table-cell;属性值可以让元素渲染为表格单元格,就可以轻松实行让子元素水平垂直居中了,自己试下
    <style>
    .wrap {display:table-cell; width:300px; height:300px; text-align:center; vertical-align:middle; background:rgba(0,0,0,0.5);}
    .test {background:red; display:inline-block;}
    </style>
    <div class="wrap">
    <div class="test">
    水平垂直居中了吧<br>
    两行文字哦
    </div>
    </div>




    二、利用vertical-align:middle
    这个方法目前是我的最爱,因为下面介绍的兼容性不是很好
    这个是利用一个没有宽度b标签来实现水平垂直居中
    <style>
    .wrap {width:300px; height:300px; text-align:center; background:rgba(0,0,0,0.5);}
    .vamb {display:inline-block; width:0px; height:100%; vertical-align:middle;}
    .test {background:red; display:inline-block;}
    </style>


    <div class="wrap">
    <b class="vamb"></b>
    <div class="test">
    CSS吧<br>
    来个宽度大点的试试
    </div>
    </div>


    效果图跟上面的一样的,就不截图了,呵呵,下面用美女图片测试吧,比较吸引眼球


    三、使用transform实现
    一般使用百分比单位的时候都是相对父元素来计算的,但是在css里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();
    这样就简单了,只是这个低版本IE不兼容,而且很遗憾 安卓2.3使用这个有bug,暂时不能在移动端使用
    <style>
    *{margin:0px; padding:0px;}
    .test {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
    </style>
    <div class="test">

    <img src="girl/tpl_8.jpg" width="100" >
    </div>


    图片水平垂直居中的,任意宽高,相对简单。


    四、弹性盒模型
    弹性盒模型就是flex,css3新增布局方式,超级好用,谁用谁知道,推荐大家都学习一番。
    这个方法我在手机端都很喜欢用,相对爽啊 呵呵。同样比较遗憾的是低版本IE不支持,不过手机端是没有问题的,使用旧版方法display:box;


    <style>
    *{margin:0px; padding:0px;}
    .flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}
    .flex-hc {-webkit-box-pack:center; -ms-justify-content:center; -webkit-justify-content:center; justify-content:center;}
    .flex-vc {-webkit-box-align:center; -ms-align-items:center; -webkit-align-items:center; align-items:center;}
    .wrap {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;}
    </style>


    <div class="wrap flex flex-hc flex-vc">
    <div class="test">
    <img src="girl/tpl_7.jpg" width="200" >
    </div>
    </div>






    我喜欢flex 水平居中 垂直居中分开用不同的class定义,这样子更灵活一点,你喜欢写在一起也是可以的,相当强大啊。但是低版本的安卓使用的是box旧版弹性盒模型,如果是要多列布局,记得要设置子元素为块元素,不然不会生效,这里说些题外话了。

    更多内容请点击焦作百姓网 www.11lu.net

    展开全文
  • 以下是实现未知宽高元素水平垂直居中的三个方法: 方法1:通过定位和transform属性来实现 html: 实现未知宽高元素垂直居中的方法1:通过定位和transform来实现 css: &lt;style&gt; .parent{ width:100%...

    以下是实现未知宽高元素水平垂直居中的三个方法:

    方法1:通过定位和transform属性来实现

    html:

    实现未知宽高元素垂直居中的方法1:通过定位和transform来实现
    css:
    <style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
        .children{
            position:absolute;
            top:50%;
            left:50%;
            background:red;
            transform:translate(-50%,-50%);
        }
    </style>
    

    方法2:通过利用flex布局

    html:

    实现未知宽高元素的水平垂直居中方法2:主要是利用flex布局来实现
    css:
    <style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .children{
            background:red;
        }
    </style>
    

    方法3:通过table属性

    html:

    实现未知宽高元素垂直水平居中,主要原理是将父元素设置为table,子元素设置为table-cell,利用table属性
    css:
    <style>
        .parent{
            display:table;
            width:100%;
            height:400px;
            background:#666;
        }
        .children{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            background:red;
        }
    </style>
    

    原文:https://blog.csdn.net/tozeroblog/article/details/79943579

    展开全文
  • .box{ overflow: hidden;...特别要注意这个min-width:0,这个是为了解决元素会被里面的内容撑开的问题,而且兼容火狐浏览器。 转载于:https://www.cnblogs.com/chengaiying/p/8954865.html
  • 未知宽高元素水平垂直居中 一、vertical-align:middle *{ margin: 0px; padding: 0px; } .wrap { posit...
  • (1)准备一个已知宽高的父元素,子元素嵌套其中,父元素设置为table,绝对定位,子元素设置为table-cell,然后设置子元素 的vertical-align为middle就可以使其垂直居中,text-align为center使其水平居中 ...
  • 第一种:利用定位实现 <!DOCTYPE html> <... <...meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">...元素未知宽高实现元素水平垂直居中</title> &l.
  • 本章节介绍一下如何实现未知宽高元素在指定元素下实现垂直水平居中效果,代码简单易懂,需要的朋友可以参考下本
  • <!DOCTYPE html> 未知宽度高度的水平垂直居中(4种) <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascrip
  • ps:不考虑兼容问题(下次会写js实现元素水平and垂直居中 ) 第一种css3的transform父类设置 position:relative;子类设置如下: .ele{ /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*...
  • 一、table布局(display:table) 二、绝对布局(position:absolute)+translate 三、转化为行内标签display:inline-block,借助另外一个标签高度来实现 四、通过js的获取标签的宽高来控制位置,得在元素加载完成后...
  • 已知宽高的盒子就不说了,说一下未知宽高的盒子水平垂直居中方法及优缺点,目前有4种。 htm代码及公共css代码 <div class="box"> <div class="all-item item">item</div> </div> .box{...
  • 未知宽高div水平垂直居中3种方法,div水平居中3种
  • 今天复习到元素水平垂直居中时,发现有一种方法是绝对定位加上元素平移来实现,初看时非常好奇为什么要加上元素平移,这个元素平移起到什么作用,然后打了个demo简单分析了一波。 <style> * { margin: 0; ...
  • 上次有朋友发了个完美让元素水平垂直居中的帖子,但是貌似仅限已知宽高的元素(没仔细看,说错了道歉)。 这次分享一下未知宽高元素水平垂直的方法。 如果你曾经研究过图片水平垂直居中的方法,那么下面这几个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,596
精华内容 1,438
关键字:

未知宽高元素水平垂直居中