当前位置: 萬仟网 > IT编程>网页制作>CSS > css实现元素居中的N种方法

css实现元素居中的N种方法

2021年02月02日  | 萬仟网IT编程  | 我要评论
前言刚参加工作时被面试官一连串居中问题虐的体无完肤得场景历历在目。“你是如何实现文本的居中的”“如果是多行文本呢”“块级元素的水平居中如何实

前言

刚参加工作时被面试官一连串居中问题虐的体无完肤得场景历历在目。“你是如何实现文本的居中的”“如果是多行文本呢”“块级元素的水平居中如何实现”“块级元素的垂直居中如何实现”。。。问到后面脑子里一团浆糊,本来知道的也不知道该如何回答了。居中是日常工作中不可避免要遇到的场景,面试中也是高频出现。这次的文章就围绕这些问题展开,希望能够帮助有和我当年一样疑惑的同学,在今后的工作和面试中再面对居中问题的时候可以游刃有余。

行内元素居中

文本垂直居中

单行文本垂直居中

单行文本的垂直居中是最简单的,设置line-height与盒子高度一样就可以。
这里有一个误区,很多人设置单行文本居中的时候会同时设置height与line-height相同,其实大可不必设置height,只设置line-height就可以,这时候盒子的高度由line-height撑起来,与line-height完全相同。

.center {
  // 完全可以不设置高度
  // height: 20px;
  line-height: 20px;
}

多行文本垂直居中
1.vertical-align

vertical-align可以指定行内元素的垂直对齐方式。

这个方法需要多增加一个.center元素将需要居中的内容包裹起来。设置父元素的line-height为元素的高度,居中子元素.center的display为inline-block,使其拥有行内元素的特性,因为line-height的继承性,所以设置line-height: 20px;重置居中子元素的line-height,然后设置vertical-align: middle;在行框盒子内垂直居中对齐。

<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>

2.table-cell
不同于行内元素设置利用vertial-align会使当前元素垂直居中对齐,table-cell元素设置vertial-align会让它的子元素垂直居中对齐,就算子元素是块级元素也会垂直对齐,所以想要实现块级元素的垂直居中也可以使用这个方法。

.box {
       height: 200px;
       display: table-cell;
       vertical-align: middle;
}

行内元素水平居中

text-align控制子行内元素的水平对齐方式,这个非常简单直接设置text-align:center就可以。

.center {
       text-align: center;
}

块级元素水平居中

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

.center {
 margin: 0 auto;
}

块级元素垂直居中

那可不可以利用margin:auto;实现垂直方向的居中呢?当然可以,可以通过修改writing-mode改变块的流动,使块横向流动,此时height方向就会默认平铺撑满,设置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>

那有没有可能使用这个特性实现垂直与水平方向都居中呢?也是可以得,我们继续往下看

水平垂直居中

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

需要注意的是这个方法只能兼容ie8及以上浏览器,如果项目要兼容ie7可以使用下面这种方法

.box {
 position: relative;
}
.center {
 position:absolute;
 width: 200px;
 height: 200px;
 top:0;
 bottom:0;
 left:0;
 right:0;
 margin: auto;
}

2.vertacal-align
首先实现居中元素在水平方向上的居中,设置居中元素的display值为inline-clock,使其拥有行内元素的特性。给外层的盒元素设置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>

3.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>

4.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>

5.flex
如果不需要考虑兼容ie9及以前的浏览器,flex布局是最推荐的方式。
设置父元素为flex容器,主轴、交叉轴对齐方式都为居中对。关于flex的相关知识可以参考阮大神的博客,介绍的非常详细。

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

到此这篇关于css实现元素居中的n种方法的文章就介绍到这了,更多相关css 元素居中内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网! 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • 纯CSS3代码实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CS... [阅读全文]
  • http协议简述

    一、HTTP协议概述 HTTP是一个简单的请求-响应协议,属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它通常运行... [阅读全文]
  • vue-cli3的eslint配置问题解析

    vue-cli3的eslint配置问题 error: expected indentation of 4 spaces but found 0 (inde... [阅读全文]
  • leaflet加载各类图层实时操作演示

    leaflet加载各类图层 本身大小只有33k,它能加载的图层种类是有限的,不过可以借助esri-leaflet.js这个插件加载其他的图层,如果需要加载w... [阅读全文]
  • 三个不常见的 HTML5 实用新特性简介

    一、dns 预解析缓存 众所周知,解析 dns 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了... [阅读全文]
  • 不规则形状表格合并

    在学习表格时我们会遇到一些既跨行又跨列合并的情况,此时可以用下面这种方法来实现。 但是需要特别指出的是,如果一个单元格既跨行又跨列合并了,那么最好不... [阅读全文]
  • html/css实现聊天布局

    效果图 项目结构 html代码 css ... [阅读全文]
  • CSS的常用属性(三)

    静态定位 position: static (默认) 标准流 绝对定位 position: absolute 特点: 注意: 使用绝对定位的元素可以... [阅读全文]
  • 块级元素

    “块级元素”和“display为block的元素”不是一个概念,因为<li>元素默认的display值是list-item,<ta... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com