精华内容
下载资源
问答
  • 未知宽高元素水平垂直居中 一、vertical-align:middle *{ margin: 0px; padding: 0px; } .wrap { posit...

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

    一、vertical-align:middle

    <style>
    *{
    	margin: 0px; 
    	padding: 0px;
    }
    .wrap {
    	position: absolute;
    	width: 100%; 
    	height: 100%; 
    	text-align: center; 
    	background: #92b922;
    }
    .test {
    	background: #de3168; 
    	display: inline-block; 
    	color: #fff; 
    	padding: 20px;
    }
    .vamb {
    	display: inline-block;
    	width: 0px; 
     	height: 100%; 
    	vertical-align: middle;
    }
    </style>
    
    <div class="wrap">
    	<b class="vamb"></b>
    	<div class="test">
    		水平垂直居中了吧<br>
    		两行文字哦
    	</div>
    </div>
    

    二、transform

    <style>
    *{
    	margin:0px; 
    	padding:0px;
    }
    body{
    	background: #92b922;
    }
    .test {
    	background: #de3168; 
    	color: #fff;
    	position: absolute; 
    	left:50%; 
    	top:50%; 
    	-webkit-transform:translate(-50%,-50%); 
    	transform:translate(-50%,-50%);
    }
    </style>
    

    三、利用弹性盒模型

    <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:absolute; 
    	width:100%; 
    	height:100%; 
    	left:0px; 
    	top:0px; 
    	background: #92b922;
    }
    .test {
    	background: #de3168; 
    	color: #fff;
    }
    </style>
    
    <div class="wrap flex flex-hc flex-vc">
    	<div class="test">
    		水平垂直居中了吧<br>
    		两行文字哦
    	</div>
    </div>
    

    四、表格

    <style>
    *{
    	margin: 0px; 
    	padding: 0px;
    }
    .wrap {
    	width: 600px; 
    	height: 600px; 
    	display: table-cell; 
    	vertical-align: middle; 
    	text-align: center; 
    	background: #92b922;
    }
    .test {
    	background: #de3168; 
    	display: inline-block; 
    	color: #fff; 
    	padding: 20px;
    }
    </style>
    
    <div class="wrap">
    	<div class="test">
    		水平垂直居中了吧<br>
    		两行文字哦
    	</div>
    </div>
    

     


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • CSS未知宽高元素水平垂直居中 方法一 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素(parent)可以动态的改变高度(table元素的特性) ...

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

    方法一

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

    <style type="text/css">
            .parent{
                display: table;
                height: 300px;
                width: 300px;
                background-color: #f00;
            }
            .son{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                color: #008000;
                font-size: 20px;
            }
        </style>
        <body>
            <div class="parent">
                <div class="son">
                    good morning
                </div>
            </div>
        </body>

    方法二

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

    <style>
    .parent{
        height:300px;
        width: 300px;
        text-align: center;
        background: #FD0C70;
    }
    .parent span{
        display: inline-block;;
        width: 0;
        height: 100%;
        vertical-align: middle;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    .parent .son{
        display: inline-block;
        color: #fff;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    
    </style>
    <body>
        <div class="parent">
            <span></span>
            <div class="son">hello world-2</div>
        </div>
    </body>

    方法三

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

    <style>
    .parent{
        position: relative;
        height:300px;
        width: 300px;
        background: #FD0C70;
    }
    .parent .son{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        transform: translate(-50%, -50%);
    }
    </style>
    <body>
        <div class="parent">
            <div class="son">hello world-3</div>
        </div>
    </body>

    方法四

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

    <style type="text/css">
            .parent{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 300px;
                background-color: lightblue;
            }
            .son{
                color: green;
            }
        </style>
        <body>
            <div class="parent">
                <div class="son">hello</div>
            </div>
        </body>

    转载于:https://www.cnblogs.com/heson/p/10019794.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>
    
    展开全文
  • 方法一 :table、cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素(...

    方法一 :table、cell-table

    思路:显示设置父元素为: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="parent1">
            <div class="child">hello world-1</div>
        </div>
    
        <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>

    方法四:弹性盒子flex

    思路:使用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>

     

     

     

     


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • .box{ overflow: hidden;...特别要注意这个min-width:0,这个是为了解决元素会被里面的内容撑开的问题,而且兼容火狐浏览器。 转载于:https://www.cnblogs.com/chengaiying/p/8954865.html
  • 以下是实现未知宽高元素水平垂直居中的三个方法: 方法1:通过定位和transform属性来实现 html: 实现未知宽高元素垂直居中的方法1:通过定位和transform来实现 css: &lt;style&gt; .parent{ width:100%...
  • 这次分享一下未知宽高元素水平垂直的方法。 如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道 下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-...
  • 其实在平常的一些布局中也经常有要实现元素的垂直居中水平居中的的需要,下面来写几种css/css3实现的未知宽高元素水平垂直居中的写法 ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 ) 第一种 ...
  • 第一种:利用定位实现 <!DOCTYPE html> <... <...meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">...元素未知宽高实现元素水平垂直居中</title> &l.
  • div+css实现未知宽高元素垂直水平居中。很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 170
精华内容 68
关键字:

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