CSS Flexbox水平和垂直居中文本示例CSS flex示例：以水平和垂直方向为中心的子项目和文本的HTML示例让

CSS flex示例：以水平和垂直方向为中心的子项目和文本的HTML示例

让我们声明一个flex容器并添加子元素来显示。在一个flex容器内声明了四个子项。

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
  <body>
<div  class="container">
  <div class="item">
   <p>One</p>
  </div>
  <div class="item">
   <p>Two</p>
  </div>
  <div class="item">
   <p>Three</p>
  </div>
  <div class="item">
   <p>Four</p>
  </div>
</div>
</body>
</html>

在CSS样式中，容器包含flex ，flex-direction ，column 。

Flex容器内的子项目添加了一个20px的间隙。

flex项目默认是左对齐的。

.container{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.item{
  width: 100px;
  height: 100px;
  color: white;
  background-color:red;
  border: 1px solid green;
}

CSS flexbox水平和垂直对齐的例子。

要在flex container的子项目中水平和垂直地对齐

将justify-content: center 和align-content: center; 添加到flex container中。

justify-content: center:这将显示项目在垂直方向上居中
align-content: center:这将显示项目在水平方向上居中。

并将子项text-align 更新为center 。

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
  <body>
<div  class="container">
  <div class="item">
   <p>One</p>
  </div>
  <div class="item">
   <p>Two</p>
  </div>
  <div class="item">
   <p>Three</p>
  </div>
  <div class="item">
   <p>Four</p>
  </div>
</div>
</body>
</html>

css

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;    
  gap: 20px;
  
}
.item{
  width: 80px;
  height: 80px;
  color: white;
    text-align: center;
  background-color:green;
  border: 1px solid green;
}

总结

学习了如何在flex容器CSS中水平和垂直显示项目的样式。