css之元素居中

LinMeng
• 阅读 1158

行内元素居中

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

设置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;
      }
点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
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
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
HTML中经常用到的对齐,居中方式
在编写一片网页时,我们经常需要使一些文本或者图片,盒子居中!但是在众多的写法里,那些才能使我们的目的最快,最有效的达到呢!居中也是有轴线之分的,水平轴,垂直于水平轴的轴,交叉轴。1盒子居中margin:auto;通常在这此行只有一个盒子的情况下使用\需要定宽\常规流和浮动不用\2文本居中   定义水平轴线对齐方式flexst
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Stella981 Stella981
1年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue