首页 > 其他分享> > div 组件中的中心元素

div 组件中的中心元素

2022-09-11 00:31:54 作者：互联网

div 组件中的中心元素

在 div 容器中将元素居中有时会很棘手。当你制作网页的前端时，知道究竟是什么而不是每次都尝试它是非常重要的。

如何使用 CSS 使 div 居中？

现在，将元素居中不仅仅意味着 div 组件的居中。通过居中，我将专注于

水平居中
垂直居中
水平和垂直居中（组件的中心）

默认情况下，网页内容从屏幕左上角开始，从左到右移动。

让我们首先在 div 组件中将图像水平居中。之后，我们将完成图像垂直居中，然后将图像完全居中。

将 div 中的图像水平居中

使用文本对齐在 Div 中水平居中图像

假设您有一个 div，您可以通过以下方式在其中插入图片：

 <div class="container">  
 <img src="./css-logo.png" alt="CSS 徽标" />  
 </div>

现在，我将应用 CSS 样式以使图像可见。您可以看到现在图像处于其默认位置。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 }  
 .container img {  
 宽度：100px；  
 }

我们通常使用 text-align 方法来使文本居中。但是，我们也可以在容器内的图像上使用它。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 文本对齐：居中；  
 }  
  
 .container img {  
 宽度：100px；  
 }

此方法仅在我们在容器中使用此值而不是图像时才有效。

使用margin-auto水平居中div中的图像

您可以用来在 div 容器中水平居中图像的另一种方法是 margin 属性，其值为 auto。

在此方法中，元素将占据指定的宽度，空白区域将在左右边距之间平均分配。我们将在图像而不是容器上应用此属性。当然！在此之前，我们需要指定图像的宽度，以便 margin 属性能够平均分割空白空间。

我们需要记住的另一件事是 margin 属性不适用于内联元素。这里我们的图像是内联的，所以我们将通过将显示属性设置为块来将其转换为块元素。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 }  
  
 .container img {  
 宽度：100px；  
 边距：自动；  
 显示：块；  
 }

使用位置和变换属性在 div 中水平居中图像

这种方法可能很棘手，但我们将一步一步地进行，以免出错。首先，我们将设置位置属性，然后是变换属性。

所以现在您需要首先将容器的位置设置为相对位置和图像位置绝对位置。通过这样做，您可以向左、向右、向上和向下移动图像。

但现在我们只想向左移动 50% 或向右移动 50%。现在它将如下图所示。

如您所见，它仍然没有完美地放置在中心。这是因为我们没有将要设置其值的 transform 属性分配给 translateX。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 位置：相对；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 位置：绝对；  
 左：50%；  
 变换：translateX（-50%）；  
 }

使用 display-flex 将 div 中的图像水平居中

如您所见，使用位置和变换属性可能是一项乏味的任务。 CSS flexbox 使响应式布局更容易。我们还可以通过使用值为 flex 的 display 属性将图像水平放置在容器的中间。

仅此一项是行不通的，您需要定义图像的位置。它可以是中心、左侧和右侧：

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 显示：弯曲；  
 证明内容：中心；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 }

让我们看看如何在 div 中将图片垂直居中。稍后，我们将了解如何将 div 中的图像水平和垂直居中，创建一个完美的中心。

将 div 中的图像垂直居中

使用 display-flex 将 div 中的图像垂直居中

以前我们使用 display-flex 方法水平居中。我们将使用类似的方法。

这一次，您不需要使用 justify-content 属性。相反，请使用 align-items 属性。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 显示：弯曲；  
 对齐项目：居中；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 }

要使此方法起作用，请确保您指定了容器的高度。这样就可以计算出 div 组件的中心。

使用 position 和 transform 属性在 div 中垂直居中图像

您将执行与水平居中所做的类似的操作。

这一次，您不会使用左或右，而是使用顶部和底部来确保垂直居中。由于我们需要垂直移动图像，我们将使用转换属性值作为 translateY。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 位置：相对；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 位置：绝对；  
 最高：50%；  
 变换：translateY（-50%）；  
 }

在 div 中将图像居中

使用 display-flex 使 div 中的图像居中

为了使图像垂直和水平居中，您将使用 display-flex 属性。

为此，将 justify-content 和 align-items 属性设置为值中心。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 }

使用位置和变换属性在 div 中居中图像

您一定已经从前面的方法中得到了一个想法，我们正在结合我们从水平和垂直居中学到的属性。这也是你现在要做的。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 位置：相对；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 变换：translateX(-50%) translateY(-50%);  
 }

您还可以使用 translate(X,Y) 组合 translateX 和 translateY。

 。容器 {  
 宽度：200px；  
 高度：200px；  
 背景颜色：#0a0a23；  
 位置：相对；  
 }  
  
 .container img {  
 宽度：100px；  
 高度：100px；  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 变换：翻译（-50%，-50%）；  
 }

最后说明

在本教程中，您学习了如何将图像在 div 中垂直、水平或同时居中。

居中图像时，您会经常选择 Flexbox 方法，而不是难以使用的位置方法，这可能会扭曲您的网站。

我希望你喜欢这个博客。喜欢、分享和评论我的博客，并给我一些关于写更多博客的新想法。

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** ** , ** YouTube** ** ，和 __不和谐 ** .** 对增长黑客感兴趣？查看 ** 电路** ** .**

本文链接：https://www.qanswer.top/25858/18301100

标签：居中,元素,100px,宽度,图像,组件,div,200px
来源： https://www.cnblogs.com/amboke/p/16683277.html