精华内容
下载资源
问答
  • HTML垂直居中布局

    2020-07-18 16:15:14
    HTML垂直居中布局 垂直居中布局就是指当前元素在父元素容器中,垂直方向是居中显示的 实现方法: table-cell+ vertical-align属性配合使用 absolute + transform 属性配合使用   table-cell+ vertical-...

    HTML垂直居中布局

    垂直居中布局就是指当前元素在父元素容器中,垂直方向是居中显示的

    实现方法:

    • table-cell+ vertical-align属性配合使用
    • absolute + transform 属性配合使用
       

    table-cell+ vertical-align


    设置display: table-cell;父元素设置为单元格

    再使用vertical-align: middle;设置为垂直方向对齐方式

    		.parent {
                width: 200px;
                height: 600px;
                background-color: antiquewhite;
                display: table-cell;
                /*
                display属性:
                table:设置当前元素为<table>元素
                table-cell:设置当前元素为<td>元素(单元格)
                */
                vertical-align: middle;
                /*
                vertical-align属性:用于设置文本内容的垂直方向对齐方式
                top:顶部对齐
                middle:居中对齐
                bottom:底部对齐
               */
            }
    
            .son {
                width: 200px;
                height: 200px;
                background-color: brown;
            }
    
      <!--定义一个父元素-->
        <div class="parent">
            <!--定义一个子元素-->
            <div class="son">
                居中对齐
            </div>
        </div>
    

    优点

    浏览器兼容器比较好

    缺点

    vertical-align属性具有继承性,会导致父元素的文本也是居中显示的

    如果父元素中包含除子元素外的内容的话,就不大适用

     

    absolute + transform


    利用移动,同HTML水平居中里的absolute + transform原理一样

      .parent {
                width: 200px;
                height: 600px;
                background-color: antiquewhite;
    
                position: absolute;
            }
    
            .son {
                width: 200px;
                height: 200px;
                background-color: brown;
    
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
    

    body同上个方法

    优点

    父元素是否脱离文档流,不影响子元素垂直居中效果

    缺点

    transform属性是CSS3 中的新增属性,浏览器的支持情况可能会不好


    展开全文
  • body{ display: flex; display: -webkit-flex; flex-direction: row columncolumn-reverserow-reverse /*调节布局元素的方向*/ flex-wrap:nowrapwrapwrap-reverse/*换行属性*/...justify-content:/*水平居中*/...

    body{

      display: flex;
       display: -webkit-flex;

    flex-direction:  row  column  column-reverse  row-reverse   /*调节布局元素的方向*/

    flex-wrap: nowrap  wrap  wrap-reverse  /*换行属性*/

    justify-content: /*水平居中*/

    flex-start(默认) :左对齐       flex-end:右对齐     center:居中     space-between:两端对齐,项目之间的间隔都相等    space-around:每个项目两侧的间隔相等         

    align-items:/*垂直居中*/      

    flex-start:交叉轴的起点对齐   flex-end:交叉轴的终点对齐    center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。     stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。

    }

    容器内单个元素属性

    item{

    flex-grow:     该属性主要用来定义元素的放大比例,它的默认值是 1。

    flex-shrink:   该属性主要用来定义元素的缩小比例,默认值为 1。

    flex-basis:    浏览器会根据该属性进行对主轴计算是否有多余的空间。默认值为 auto

    flex :             该属性是以上三个属性的缩写形式,默认值为0 1 auto。

                      两个其他的快捷属性,auto(1 1 auto) 和none(0 0 auto)

    }

     

     

     

    body{

        display: flex;
        display: -webkit-flex; 

     

     justify-content: center;

       /*//使子项目水平居中*/
        align-items: center;

            调节布局元素的方向
          flex-direction:                    column;//纵向排列(垂直)     column-reverse 垂直反向排列            row;//横向排列(水平)   

         
     flex-wrap:   换行属性     nowrap | wrap | wrap-reverse

    nowrap不换行

    在这里插入图片描述

    (2)wrap换行

    在这里插入图片描述

    (3)wrap-reverse换到第一行

    在这里插入图片描述

    }

    展开全文
  • html垂直居中的几种做法 1,定位 (1)父相子绝,再将子盒子top/left各50%,再通过margin-left/top来移动其本身宽高的一半 父{position: relative;} 子{position:absolate; height:200px; width:200px; top:50%; ...

    html垂直居中的几种做法

    1,定位

    (1)父相子绝,再将子盒子top/left各50%,再通过margin-left/top来移动其本身宽高的一半

    父{position: relative;}
    子{position:absolate;
    height:200px;
    width:200px;
    top:50%;
    left:50%;
    margin-left:100px;
    margin-right:100px;
    }
    

    (2)transform:translate(-50%,-50%) 可再不知宽高情况下使用
    //设置再子元素,其再各方向上,按自身宽高成比例偏移,配合定位

    父{position: relative;}
    子{position:absolate;
    height:200px;
    width:200px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    }
    

    (3)margin:auto //在子元素设lelt right top bottom为0,再设margin: auto;

    父{position: relative;}
    子{position:absolate;
    height:200px;
    width:200px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    }
    

    2,弹性盒

    (1)父盒子设display:flex;子设margin:auto;//仅限于单一子盒子

    父{position: flex;}
    子{
    height:200px;
    width:200px;
    margin:auto;
    }
    

    (2)父盒子设flex,与其他水平居中;

    父{display:flex;
    justify-content:center;
    align-items:center;
    }
    
    展开全文
  • html垂直居中的方法

    千次阅读 2020-10-15 16:57:26
    单行文本或几个字的垂直居中 </div> <style> #div1{ width: 300px;height: 100px;/* 设置容器的宽高 */ margin: 100px auto;/* 使容器水平边距自动相等 */ border: 1px solid red;/* 给文本...

    1.行高法line-height(适用于单行或较少几个文字)

    设置文字的行高和容器的高度相同

    <div id="div1">
          单行文本或几个字的垂直居中
        </div>
    <style>
    	#div1{
    	    width: 300px;height: 100px;/* 设置容器的宽高 */
    	    margin: 100px auto;/* 使容器水平边距自动相等 */
    	    border: 1px solid red;/* 给文本加上边框可以更清楚地看到效果 */
    	    line-height: 100px; /*设置line-height与rongqi的height相等*/
    	    text-align: center; /*设置文本水平居中*/
    	    overflow: hidden; /*防止内容超出容器或者产生自动换行*/
    </style>
    

    在这里插入图片描述

    2.多行文本-内容填充padding

    简单来说就是把文字挤到中间,此时容器高度不固定

    <div id="div1">
            多行文本的垂直居中
    		多行文本的垂直居中
    		多行文本的垂直居中
    		多行文本的垂直居中
    		多行文本的垂直居中
        </div>
    <style>
    	#div1{
    	    width: 300px;
    	    margin: 100px auto;/* 使容器水平边距自动相等 */
    	    border: 1px solid red;/* 给文本加上边框可以更清楚地看到效果 */
    	    line-height: 100px; /*设置line-height与rongqi的height相等*/
    	    text-align: center; /*设置文本水平居中*/
    	   padding:50px 20px;}
    </style>
    

    在这里插入图片描述

    3.多行文本-用vertical-align,div模拟tabel

    vertical-align只对有valign特性的元素才生效

     <div id="div1">
    	<div id="div2">
    		 多行文本的垂直居中
    		 多行文本的垂直居中
    		 多行文本的垂直居中
    		 多行文本的垂直居中
    		 多行文本的垂直居中
    	 </div>
    </div>
    <style>
    	#div1{
    	    width: 300px;height: 200px;
    	    margin: 100px auto;/* 使容器水平边距自动相等 */
    	    border: 1px solid red;/* 给文本加上边框可以更清楚地看到效果 */
    	    display: table;
    		}
    	#div2{
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		width: 100%;
    	}
    </style>
    

    在这里插入图片描述

    4.子容器的垂直居中-定位移动

    子绝父相,根据子容器的大小进行定位移动

     <div id="div1">
    	<div id="div2">
    		 子容器的垂直居中
    	 </div>
    </div>
    <style>
    	#div1{
    	    width: 300px;height: 200px;
    	    background-color: #ccc;
    		position: relative;
    		}
    	#div2{
    		width: 100px;height: 100px;
    		background-color: #FB7299;
    		margin: auto;
    		position: absolute;
    		left: 50%;top:50%;
    		margin-top: -50px;margin-left: -50px;
    	}
    </style>
    

    在这里插入图片描述

    展开全文
  • HTML 垂直居中body中的应用

    千次阅读 2019-07-30 14:00:54
    应用场景: 在body中书写一个代码块, 使其相对于body垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • 单行文本垂直居中 .title{ height: 80px; line-height:80px;/* 标签高度=行高 */ text-align: center;/* 垂水平居中 */ } 块级元素垂直水平居中 .title{ display: table-cell;/* 定义为表格单元格 */ vertical...
  • 既然说到兼容一切,那么就不用CSS3的 transform 写法 ...本文介绍的原理大致相同,通过加入一个,宽度为0,高度100%,的内联元素,来居中基线。自定一个一个clearmid 的样式如下.clearmid{ height:100%; widt
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;
  • 居中</title> <style> .father { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 500px; background-color: rgb(197, 34, 34); } .child ...
  • 真是学无止境啊...CK说网上有很大概15种可以让CSS元素居中的方法。Oh,卖糕的!这是逼我查资料到夜晚两点的节奏么?闲话休体,现在我们来进入正题咯:先来说说水平居中。CSS水平居中的方法:1、最常见的margin方法:给...
  • div框水平垂直居中跟内容垂直居中
  • 主要介绍了html元素 水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下
  • html文本垂直居中对齐,html文本垂直居中对齐,代码如下:行1行2行3另一个span实现原理:1、首先设置div元素的高与行高为一样的值,这样在块内的行内元素就会垂直居中2、设置span元素的显示,修改display为line-...
  • html如何将框内的文字既垂直居中又水平居中?在html css 设计中,怎么让border内的文字 既水平剧中又水平居中呢?可以使用“text-align”属性让文字水平居中,使用“ling-height”属性让文字垂直居中。为div添加...
  • 三种让img元素图片在盒子内垂直居中的方法教程,遵循代码与文章教程懂得驾驭并加以应用。一、使用flex完成垂直居中操作cssflex实现垂直居中。flex兴许不是实现垂直居中最好的抉择,因为IE8,9其实不赞成它。那时,...
  • html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 一、 img的垂直水平居中使用到的重要样式属性display,vertical-alignvertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素上,就注意下面的display设置Document.main{width: 400px;...
  • 元素的垂直居中#page{width: 100%;text-align: center;color:white;}#hd{height: 20px;background: rgba(26, 128, 0, 0.6);padding: 15px 15px 50px 15px;}#bd{height: 800px;background: #f1f1f1;}#ft{background: ...

空空如也

空空如也

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

html垂直居中