css之元素居中

LinMeng 等级 760 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;
      }
收藏
评论区

相关推荐

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 in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
CSS
css垂直渐变   #example3        {         /\* fallback \*/         background-color:#063053;         /\* chrome 2+, safari 4+; multiple color stops \*/         background-image:-we
CSS
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。  浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width hei
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
Java web之JSP的CSS样式不起作用
在编写静态页面时,CSS解析没问题;换成jsp之后样式完全丢失。造成这个的原因是,CSS写的相对路, <link href="../css/notification.css" rel="stylesheet" type="text/css" /> 而这个相对路径是按照jsp文件的当前位置写的。但是,在转换成JSP之后,实际上是使用GET
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
CSS Font
CSS Font-Size: em vs. px vs. pt vs. percent =========================================== One of the most confusing aspects of CSS styling is the application of the **font-size** at
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
Selenium2学习(六)
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求。css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁。 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到。两篇对比学习,更容易理解。 一、css:属性定位