JavaScript 如何将Flexbox容器对齐到中心

要使用JavaScript将一个flexbox容器置于中心位置，我们首先需要使用一个DOM操作方法（如querySelector）来选择该容器。接下来，我们需要将该容器的CSS属性设置为 “display: flex “和 “justify-content: center”。这将使容器内的项目在水平方向上与中心对齐。

Flexbox是CSS3中的一种布局模式，可以让你在页面上对齐和分配元素。它可以用于创建一个主导航栏或布置一个图片库等。Flexbox是一个强大的工具，可以使你的网页布局更加灵活和响应。

方法

有几种方法可以使用JavaScript将Flexbox容器置于中心位置。

最常见的方法是将 margin-left 和 margin-right 属性设置为 “auto ” 。这将导致Flexbox容器在其父元素中居中。
另一种方法是将 Flexbox 容器的宽度设为 “100%”，然后将 “justify-content “ 属性设为 “居中 ” 。这将使flexbox容器在其父元素中居中。

下面的代码将使用JavaScript将一个flexbox容器居中。容器必须有一个定义好的宽度，而且flex-direction必须被设置为row。

首先，我们得到一个ID为 “container “的元素-

var container = document.getElementById("container");

然后，我们将容器的style.flexDirection设为 “行” —

container.style.flexDirection = "row";

最后，我们将容器的style.justifyContent设置为 “居中”-

container.style.justifyContent = "center";

例子

<!DOCTYPE html>
<html>
<head>
   <title>Align Flexbox Container</title>
</head>
   <body>
      <div id='container'>
         <div style="color: black;">I will be centered</div>
      </div>
      <script> 
         var container = document.getElementById("container");
         container.style.display ='flex';
         container.style.flexDirection = 'row';
         container.style.justifyContent = 'center';
      </script>
   </body>
</html>