如何使用 CSS 的 Flexbox 属性使 <div> 居中？

百变鹏仔 3个月前 (09-20) #CSS

文章标签如何使用

We can center a

in css using justify-content property and align-item property of flexbox. They are popular because they are responsive and easy to use. In this article, we shall learn how to center

using the Flexbox properties.

使用 align-items 和 justify-content 属性

使用flexbox的最流行的居中div的方法是结合justify-content和align-items属性。

justify-content属性会水平居中对齐div。
立即学习“前端免费学习笔记（深入）”；
align-items属性将div垂直居中对齐。

If you want to center align only in one direction, i.e., either vertically or horizontally, we should use only one among the properties we mentioned.

Use the align-items and the justify-contents to center align the child horizontally and vertically.

Example

<!DOCTYPE html><html lang="en"><style>   .parent{      border: 2px solid green;      height:30vh;      width:30vw;      display: flex;      flex-direction: row;      justify-content: center;      align-items: center;      background-color: orange;   }   .child{      border: 2px solid red;      height:10vh;      width:10vw;      background-color: yellow;   }</style></head><body>   <div class="parent">      <div class="child">         This is the child element.      </div>   </div></body></html>

In the code, the parent element is a green-bordered orange box with a height of 30% of the viewport height and a width of 30% of the viewport width.The parent is centered both horizontally and vertically with the help of "display: flex", "flex-direction: row", "justify-content: center" and "align-items: center."
要使用align-items和justify-content，我们首先需要使用display属性声明元素为flexbox。子元素是一个高度为视口高度的10%、宽度为视口宽度的10%的带有红色边框的黄色盒子，放置在父元素内部。

结论

在本文中，我们了解了如何使用CSS的flexbox属性来居中一个

。我们只需要使用flexbox的justify-content和align-content属性就可以实现相同的效果。

文章推荐

如何使用 CSS 的 Flexbox 属性使 &lt;div&gt; 居中？

使用 align-items 和 justify-content 属性

Example

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写

如何使用 CSS 的 Flexbox 属性使 <div> 居中？