css之元素居中

LinMeng
• 阅读 1428

行内元素居中

文本垂直居中
单行文本垂直居中

设置line-height与盒子高度一样就行 这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与lin-height属性一样,其实完全没必要,只设置line-height就行,这时候盒子的高度由line-height撑起来,与height完全相同。

多行文本垂直居中
  1. vertical-align vertical-align 可以指定行内元素的垂直对其方式
    <div class="box">
     <div class="center">
          秀色湖光照大地,照亮我也照亮你        
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     line-height: 200px;
     width: 300px;
    }
    .center {
     background-color: green;
     line-height: 20px;
     display: inline-block;
     vertical-align: middle;
    }
    </style>
    这个方法需要多增加一个标签(.box)将需要居中的内容包裹起来。设置父元素的line-height为元素的高度,居中子元素.center的display为inline-block,使其拥有行内元素的特性,因为line-height的继承性,所以设置line-height: 20px;重置居中子元素的line-height,然后设置vertical-align: middle;在行框盒子内垂直居中对齐。
  2. table-cell 不同于行内元素设置利用vertial-align会使当前元素垂直居中对齐,table-cell元素设置vertial-align会让它的子元素垂直居中对齐,就算子元素是块级元素也会垂直对齐,所以想要实现块级元素的垂直居中也可以使用这个方法。
    .box {
       height: 200px;
        display: table-cell;
        vertical-align: middle;
    }

    行内元素水平居中

    text-align控制行内元素的水平对齐方式,其值有left,center,right.

    块级元素水平居中

    margin的值为auto可以占据对应方向的所有剩余方向,如果设置水平方向上两个方向的margin值都为auto,两个方向就会平分剩余空间,从而实现居中。 但是我们从来没有使用这个方法来实现垂直方向的居中呢?因为auto值起作用有一个前提条件,就是在对应的方向上如果不设置具体的长度,会自动铺满。显然,只有width属性时可以铺满父元素的。

    块级元素垂直居中

    那可不可以利用margin:auto实现垂直方向的居中呢?也是有办法的,我们可以通过修改writing-mode属性改变块的流动,使块横向流动,此时height方向就会像width一样默认平铺撑满,这是设置margin:auto就可以实现垂直方向上的居中。但是这样做有个副作用,因为writing-mode属性的可继承性,会导致该元素下的所有子元素全部的流方向都变为横向。此时水平方向不能再使用此方法实现居中了。
    <div class="box">
     <div class="center"> 
         从此烟雨落京城,一人撑伞两人行。
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     height: 200px;
     writing-mode: vertical-lr;;
    }
    .center {
     background-color: green;
     height: 50px;
     margin: auto 0;
    }
    </style>

    水平垂直居中

  3. position(居中元素固定宽高) 设置父元素绝对定位,需要居中的元素相对定位,top,right,bottom,left的值都为0,此时如果不设置具体的宽高,居中元素就会在水平和垂直两个方向上都铺满元素,给需要居中的元素设置宽高配合margin:auto,就可以实现绝对居中了。

注意,只兼容IE8以上 2. vertical-align

  • 先实现居中元素在水平方向上的居中,设置居中元素的display属性为inline-block,使其拥有行内元素的特性,给外层的父元素设置text-align:center;使居中元素在水平方向上居中
  • 再实现在垂直方向上的居中,这个方法需要添加一个辅助元素,设置辅助元素height:100%;使当前盒子的高度撑满父元素,然后设置vertical-align:middle,使其在垂直方向上居中对齐。
    <div class="box">
     <div class="assist"></div>
     <div class="center"> 
         他朝若是同淋雪,此生也算共白头。
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     height: 200px;
     width: 500px;
     text-align: center;
    }
    .center {
     background-color: green;
     width: 150px;
     display: inline-block;
     vertical-align: middle;
    }
    .assist {
     display: inline-block;
     height: 100%;
     vertical-align: middle;
    }
    </style>
    1. position配合margin 这个方法适用与居中元素宽高已知的情况。设置父元素相对定位,居中元素绝对定位,left、top值都为50%,left、top的值分别相对于父元素的宽高计算,此时居中元素的左上顶点会位于父元素的正中央。然后再设置居中元素的margin-left、margin-top为宽高的负一半,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
      <div class="box">
      <div class="center"> 
        梅须逊雪三分白,雪却输梅一段香。
      </div>
      </div>
      <style>
      .box {
      background-color: orange;
      height: 200px;
      width: 500px;
      position: relative;
      }
      .center {
      background-color: green;
      width: 150px;
      height: 50px;
      position:absolute;
      top:50%;
      left:50%;
      margin-left: -75px;
      margin-top: -25px;
      }
      </style>
    2. position配合transform 第四种方法是使用position配合transform。这种方法跟上一个方法原理上基本相似,但使用场景增加了宽高不固定的元素。一样的先设置父元素相对定位,居中元素绝对定位,left、top值都为50%。再设置居中元素transform: traslate(-50%, -50%);,translate的百分比值是相对于自身去计算的,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
      <div class="box">
      <div class="center"> 
        现在我才听说,你当初找过我,我能想象你当时有多难过。
      </div>
      </div>
      <style>
      .box {
      background-color: orange;
      height: 200px;
      width: 500px;
      position: relative;
      }
      .center {
      background-color: green;
      width: 150px;
      position:absolute;
      top:50%;
      left:50%;
      transform: traslate(-50%, -50%);
      }
      </style>
    3. flex 如果不需要考虑兼容IE9及以前的浏览器,flex是较好的方式。 设置父元素为flex容器,主轴、交叉轴对齐方式都为居中对。
      .box {
      display: flex;
      align-items: center;
      justify-content: center;
      }
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
HTML中经常用到的对齐,居中方式
在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。1盒子居中margin:auto;通常在这此行只有一个盒子的情况下使用\需要定宽\常规流和浮动不用\2文本居中   定义水平轴线对齐方式flexst
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33