css之元素居中

LinMeng 等级 455 1 1

行内元素居中

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

设置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;
      }
收藏
评论区

相关推荐

前端开发中79条不可忽视的知识点汇总
过往一些不足的地方,通过博客,好好总结一下。 1.css禁用鼠标事件 css .disabled { pointerevents: none; cursor: default; opacity: 0.6; } 2.get/post的理解和他们之间的区别 http 超文本传输协议(HTTP)的设计目的是保证客户机
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
css之元素居中
行内元素居中 文本垂直居中 单行文本垂直居中 设置lineheight与盒子高度一样就行 这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与linheight属性一样,其实完全没必要,只设置lineheight就行,这时候盒子的高度由lineheight撑起来,与height完全相同。 多行文本垂直居中 1. ve
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
「Vue — css」使用sass/scss并定义全局变量
1:安装sassnode languagecnpm install sassnode save dev 2:安装sassloader languagecnpm install sassloader save dev3:在vue.config.js中进行配置 languagemodule.exports css: loaderOptions: s
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?