如何使用 CSS 的 Flexbox 属性使居中？-css教程-PHP中文网

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

PHPz

发布： 2023-09-03 12:01:02

转载

1606人浏览过

如何使用 css 的 flexbox 属性使 <div> 居中？

We can center a <div> 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 <div> using the Flexbox properties.

使用 align-items 和 justify-content 属性

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

justify-content属性会水平居中对齐div。

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

移动端UI&微信UI YDUI Touch
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

81

查看详情

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%的带有红色边框的黄色盒子，放置在父元素内部。