我已经说了5种css居中实现的方式了,面试官竟然说还不够?

更新日期: 2022-07-19阅读: 663标签: 居中
这是一篇关于居中对齐方式的总结

开篇之前,先问一下大家都知道几种居中的实现方式?

面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式

  1. 使用flex布局设置居中。
  2. 使用flex 时也能通过给子项设置margin: auto实现居中。
  3. 使用绝对定位的方式实现水平垂直居中。
  4. 使用grid设置居中。
  5. 使用grid时还能通过给子项设置margin: auto实现居中。
  6. 使用tabel-cell实现垂直居中。
  7. 还有一种不常用的方法实现垂直居中。
  8. 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设置为0

1.flex布局设置居中

常见的一种方式就是使用flex布局设置居中。

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式

给容器设置:

  • display: flex;写在父元素上这就是定义了一个伸缩容器

  • justify-content主轴对齐方式,默认是横轴

  • align-items 纵轴对齐方式,默认是纵轴

优点: 简单、方便、快速,三行代码搞定。

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
align-items: center; // 纵轴对齐方式,默认是纵轴 子元素垂直居中
justify-content: center; //纵轴对齐方式,默认是纵轴
}
.child {
background: red;
}
</style>

代码片段

2.flex-给子项设置

第一种方式是给父盒子设置属性,这一种是给子盒子设置margin: auto实现居中。给容器设置 display: flex; 子项设置 margin: auto;

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.child {
background: red;
margin: auto; // 水平垂直居中
}
</style>

代码片段

3.绝对定位

使用绝对定位的方式实现水平垂直居中。容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

优点就是不用关心子元素的长和宽,但是这种方法兼容性依赖translate2d的兼容性

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>

代码片段

4.tabel-cell实现垂直居中

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

而且tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

  • 使用tabel-cell实现垂直居中,容器设置 display: table-cell;;

  • vertical-align: middle属性设置元素的垂直对齐方式

  • 子元素如果是块级元素,直接使用左右margin:auto实现水平居中。如果是行内元素,给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle; // 设置元素在垂直方向上的对齐方式
text-align: center;
}
.child {
background: red;
display: inline-block;
}
</style>

代码片段

5.grid设置居中

  1. 使用grid设置居中。给容器设置 display: grid; align-items: center; justify-content: center;

通过给容器设置属性,达到居中效果,但是这种方式兼容性较差,不推荐。

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
.child {
background: red;
}
</style>

代码片段

6.grid给子项设置

使用grid时还能通过给子项设置margin: auto;实现居中。给容器设置 display: grid; 子项设置 margin: auto;

某些浏览器会不支持grid布局方式,兼容性较差,不推荐。

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.child {
background: red;
margin: auto;
}
</style>

代码片段

7.给容器加给伪元素

这是一种不常用的方法实现垂直居中。给容器加给伪元素,设置line-height等于容器的高度。给孩子设置display: inline-block;

此种方式适合给文本设置水平垂直居中

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.box::after {
content: "";
line-height: 200px;
}
.child {
display: inline-block;
background: red;
}

</style>

代码片段

8.还有一种奇葩的方法

这个奇葩方式和第三种使用绝对定位相似,只不过需要给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto;也能实现垂直水平居中。

<div class="box">
<div class="child">水平垂直居中</div>
</div>

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
background: red;
width: 100px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>

代码片段

以上就是一些我们常用的垂直居中的方案。

由于垂直居中往往需要修改display属性,所以就会在排版上造成一些影响。例如不该用flexbox的地方如果用了flexbox,不该用table的地方用了table,不该用inline-block的地方用了inline-block,后续反而要多写许多其他的定位样式来修正,那就有点得不偿失了。因此如何活用这些CSS垂直居中的方法,就要看大家的版面结构而灵活运用

链接: https://www.fly63.com/article/detial/11907

css样式——完美解决div水平居中及div水平垂直居中的方法总结

在我们网页开布局中,经常遇到div元素的垂直居中或者水平居中。这篇文章,我总结一下

css图片居中,通过纯css实现图片居中的多种实现方法

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结。

安卓移动端line-height垂直居中出现偏移的原因,及解决方法

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

css中line-height的理解_介绍line-height实际应用

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。line-height实际应用:图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

div元素宽度不定的情况下如何居中显示

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意,而是有其现实的原因

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!