CSS实现垂直水平居中的5种方式

更新时间:3个月前 作者:CMS开发网 来源:本站 点赞数:0人 阅读数:115次 0 条评论
摘要:给大家分享一下使用HTML和CSS实现垂直和水平居中的五种不同方式。可能还有其他居中方法(例如,使用margin: auto),但为了简单起见,同时按照事物演变的背景,本文将仅介绍这五种居中方法:使用表格使用负边距使用转换使用Flex布局使用Grid布局很多人在面试过程中,如果遇到要求将页面上的一个元素垂直和水平居中的问题,往往
CSS实现垂直水平居中的5种方式

CSS实现垂直水平居中的5种方式

给大家分享一下使用HTML和CSS实现垂直和水平居中的五种不同方式。

可能还有其他居中方法(例如,使用margin: auto),但为了简单起见,同时按照事物演变的背景,本文将仅介绍这五种居中方法:

使用表格

使用负边距

使用转换

使用Flex布局

使用Grid布局

很多人在面试过程中,如果遇到要求将页面上的一个元素垂直和水平居中的问题,往往无法给出正确的答案。希望这篇文章能对大家有所帮助。

方法一:使用表格

注意:请避免使用这种方法。

在最开始,因为没有简单的方法做到居中元素,所以我们使用表格来垂直和水平居中。当然,这是一种糟糕的做法,但却是早期时候唯一可用的选择。

思路是添加一个具有单个单元格的表格,并将该单元格垂直和水平居中:

<table>
  <tr>
    <td>
      CMS开发网
    </td>
  </tr>
</table>
table {
  width: 100%;
  height: 100%;
}

td {
  vertical-align: center;
  text-align: center;
}

之所以说这种方法错误,原因有很多:

过于冗长:需要额外的元素来实现内容居中。

对HTML语义的错误使用:这些元素用于它们的外观,而不是其含义。

不合宜的:使用表格进行了布局,而表格原本用于显示数据。

因此,这种方法并不推荐。所以我们不再使用这种方法,换了其他更好的。

方法二:使用负边距

注意:避免使用这种方法。

将元素以绝对定位的方式垂直和水平移动到容器的50%,然后分别在顶部和左侧应用一半高度和宽度的负边距:

<div>CMS开发网</div>

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  line-height: 60px;
  margin-left: -100px;
  margin-top: -30px;
  text-align: center;
}

这种方法比前一种方法好,但还是有一些缺点:

需要一些准备工作:需要事先知道元素的大小才能设置正确的负边距。

可能会影响布局:更改边距可能会影响周围元素的位置,line-height可能会导致多行问题等。

仍然过于冗长:此方法需要许多CSS属性才能正确居中内容。

有些人可能会说,“怎么不使用CSS变量和calc函数来避免这些问题?”,是的,“现在”来看这样做是正确的,记住是现在。但是那时候,CSS自定义属性并没有那么多浏览器支持,对calc的支持也只是稍微好那么一丁点儿。

方法三:使用转换

这种方法与上一种方法很接近。将元素绝对定位到顶部和左侧的50%,然后使用transform转换为一半大小:

使用这种方法,我们还需要指定宽度和高度,这并不总是可行的。

<div>CMS开发网</div>
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

转换的百分比与元素的尺寸有关。因此,转换-50%表示转换一半大小分别到左侧和顶部。而无需知道元素的大小。

这种水平垂直居中的方法在一段时间内是大家公认的常用方法。因为非常简单(只有4个CSS属性),也不依赖于任何其他元素(除了你可能需要容器中的定位)或其他HTML元素。

这种方法的一个缺点是,position: absolute会使元素脱离页面的正常文档流。结合变换,可能会导致元素与页面上的其他元素重叠。

方法四:使用Flex布局

前一种的方法流行了很久,可以说用起来还是蛮得心应手的。但随后,出现了用CSS布局内容的新方法:Flexbox(弹性盒子)和Grid(网格)。这给内容的定位和对齐(不仅仅是居中)提供了无限可能。

使用弹性盒子(和网格)居中的有趣之处在于进入容器的是样式而不是元素本身:

<div>CMS开发网</div>
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

你可以将这看作是布局内容更“自然”的方法。一个或多个元素(flexed容器的子元素)的一起使用,可以提供比之前方法更多的选项。

居中多行内容时可能会出现一个问题。默认情况下,文本仍将左对齐,所以可能不会给人居中的感觉。这是因为居中的是元素本身而不是其内容。在某些情况下,你可能需要执行text-align: center以便使所有内容都完全居中。

方法五:使用Grid网格布局

我们可以使用网格应用与弹性盒子相同的属性,只需把display的值从flex更改为grid即可,它们的工作原理是一样的:

<div>CMS开发网</div>
div {
  display: grid;
  align-items: center;
  justify-content: center;
}

这个方法的思路是使用带有单个单元格和绝对中心的网格(有点像我们对表格所做的,但这次具有适当的语义且不涉及额外的HTML元素。)。

可以将align-items和justify-content组合成一个属性:place-items,代码更简短:

<div>CMS开发网</div>
div {
  display: grid;
  place-items: center;
}

是的,只需两行CSS就可以垂直和水平居中内容。

当容器内有多个元素时,网格和弹性盒子方法可能会增加难度。在这些情况下,有一个简单的解决方案是将所有内容包装在附加标签中。但是,一般来说,没有必要一定要这样做。

总结

如何用CSS实现居中是一项实用且有价值的技能。它将在你web开发生涯发光发热为你发挥作用。而且,正如我们在本文中看到的那样,方法也没有那么复杂。

你可以使用任何水平和垂直居中的方法(但请避免使用表格布局)。我通常使用的是transform: translate(-50%, -50%) (方法三) 和FlexBox/Grid (方法四或者方法五),具体视情况而定。

面试小技巧:如果面试官要求你水平和垂直居中元素,但在应用FlexBox/Grid方法后只能够水平居中。那么请检查父级是否设置了height属性。

THE END

如果你的问题还没有解决,可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡,点击打赏按钮扫码赞赏~

版权声明:本站部分教程是由网络收集,然后整理编辑而成,版权归原作者所有,如果由此而造成的侵权,请与我们联系,审核属实后立即删除,谢谢!请与我们联系,审核属实后立即删除,谢谢!

发表评论

发表评论
评论列表 (评论通过审核后才会显示)
暂无评论