如何使用 CSS 的 Flexbox 属性使

居中？

使用 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

   
  
 
 This is the child element. 
 
  

• 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属性来居中一个