CSS弹性布局，需要一个容器，容器中至少包含一个以上的元素，以下代码包含子元素垂直居中、水平居中、居中三种情况

<html>
<head>
<style type="text/css">
div {
  height: 200px;
  width:200px;
  background-color: blue;
  color: white;
  margin: 10px;
}

div > p:first-child {
   background-color: green;
}
div > p:last-child {
   background-color: red;
}
div > p {
 padding: 5px;
 margin:5px;
 width: fit-content;
}

.flex-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 子元素垂直分布 */
}
.flex-horizontal-middle {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.flex-vertical-middle {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* 子元素垂直分布 */
}

.flex-horizontal {
  display: flex;
}
.flex-horizontal > p {
 	flex: 1;
    height:fit-content;
    justify-content:space-around;
    margin: 0 2px 0 2px;
}
.flex-horizontal > p:first-child {
	margin-left: 0px;
    margin-right: 2px;
}
.flex-horizontal > p:last-child {
    margin-right: 0px;
    margin-left: 2px;
}

.div0 {
	background: green;
	width: 820px;
    height: fit-content;
    padding: 10px;
	display:flex; 
    flex-flow: wrap; /* 容器中的子元素会自动换行,从左往右均匀排列 */
    align-content: flex-start; /* 子元素在容器顶部排列，会解决换行时子元素行间距变大的原因*/
}

.div-1{
 	width: calc(25% - 22px);
    background: blue;
    color: white;
    padding: 10px;
    border: 2px solid red;
    height:100px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: -2px;
    margin-right: -2px;
}

</style>
</head>

<body>
	<p>垂直居中：</p>
	<div class="flex-vertical-middle"> 
    	<p>内容垂直居中1</p>
        <p>内容垂直居中2</p>
    </div>
    <p>水平居中：</p>
    <div class="flex-horizontal-middle"> 
    	<p>内容水平居中1</p>
        <p>内容水平居中2</p>
    </div>
    <p>居中：</p>
    <div class="flex-middle"> 
    	<p>内容居中1</p>
        <p>内容居中2</p>
    </div>
    
    <p>水平平均分布：<p/>
    <div class="flex-horizontal"> 
    	<p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
    </div>
	<p>flex自动换行，相邻子元素border去重叠<p/>
	<div class='div0'>
      <div class="div-1">A</div>
      <div class="div-1">B</div>
      <div class="div-1">C</div>
      <div class="div-1">D</div>
      <div class="div-1">E</div>
      <div class="div-1">F</div>
      <div class="div-1">G</div>
      <div class="div-1">H</div>
      <div class="div-1">I</div>
    </div>
</bo![在这里插入图片描述](https://img-blog.csdnimg.cn/e24019fd9ca04aba8e99a89b309d32e1.png#pic_center)
dy>

</html>

代码运行结果：
在这里插入代码片在这里插入图片描述
在这里插入图片描述

# css # 前端 # html
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生