CSS元素水平居中的三种一般办法

2023年9月25日 243次阅读 来源: 制杖魔导师

在需求方的原型稿件中，居中是一个非常常见的要求。
然而在CSS中，居中看起来并不是一个很自然的事情。

据说现代的方法是：

<style>
.class {
    display: flex; 
    justify-content: center;
}
</style>

但大部分情况都不能用。除非世上所有用户都可劲儿地更新浏览器，只用一个浏览器。那真是前端的福音。

下面分水平居中和垂直居中，谈谈我认识的元素居中方法。

水平居中

块级元素居中

margin： auto
<div class="parent">
  <div class="width-not-full margin-auto">
  something
  </div>
</div>

<style>
.width-not-full {
   width: 50%; /* or width: xx px;*/
}
.margin-auto {
   margin-left: auto;
   margin-right: auto;
}
</style>

首先是这个最熟悉的margin auto大法。当设置块级元素的宽度非100%并设置块级元素左右的margin为auto时，块级元素就能够相对其父元素水平居中。

优点：
  1. 简单。
  2. 能适应父元素的宽度变化。
缺点：
  1. 只对块级元素起作用。
  2. 需要设定元素的宽度。如果是一个padding固定，而宽度不固定的按钮或者图片，就并不方便。

内联块的居中

text-align: center;
<div class="parent text-align-center">
    <p>block p tag</p>      <!--文字居于块级元素p的正中-->
    <p class="inline-block">p tag</p>  <!--元素p会居中-->
</div>

<style>
.text-align-center {
   text-align: center;
}
.inline-block {
  display: inline-block;
}
</style>

第二种方法，就是利用text-align属性来使元素居中。
text-align会作用于元素文本内容和子元素的文本内容。而当其子元素是内联块时，内联块也能够居中。
这种方法就能够解决第一种方法中宽度不固定的图片或者按钮的问题。如下所示。

<div class="parent text-align-center">
    <img xxx class="inline-block"> <!-- 居中 -->
    <a class="inline-block">
        <img>    <!-- 居中 -->
    </a>
</div>

但这种方法的缺点很明显。

  1. 语义不直接。text-align的语义仅仅是对文本进行排列。并且这个属性的设定会对它的本职工作——排列文本造成影响，因此如果使用此方法，而文本的位置如果有不同排列需求，就需要定义了。
  2. 需要处理内联块可能会挤到一行的情况。

父元素宽度不确定，本身宽度也不确定的元素居中

当需要以窗体作为父元素的不定宽弹窗时就会出现这样的问题。
最简单的方式就是用js计算弹窗的位置，不断重新渲染。
不过仅仅针对水平居中的话，可以试一试以下这段样式

.class {
   margin-left: 50%;
   tansform: translate3d(-50%, 0, 0); /* 兼容性 */
}

原理很简单，就是将初始靠左的元素，向右移动父元素宽度的一半，然后向左移动自身宽度的一半，自然就水平居中了。显然，按照这个思路也可以实现垂直居中。

这个方法看起来很通用，但因为用得不多，并不清楚缺点在哪。
可能需要注意的问题有，性能问题，兼容性问题。

按照这种思路，还可以用position: absolute和left：50%组合来实现。

    原文作者：制杖魔导师
    原文地址: https://www.jianshu.com/p/b97de2b797e2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞