一、设置子div水平对齐

  1. 首先要有个父容器设置为text-align:center; 其次它的子div的margin的左右边距一定要设置为auto，上下边距不做要求
  2. 要指定子div的宽度与高度。

 

二、设置元素垂直居中

1.本人比较推荐使用弹性盒子，主要是现在一般浏览器都支持，可以自动调节

将父容器加上display:flex;   flex-direction:column;   justify-content:space-around;    items-align:center;这4段css代码意思是子元素垂直排列根据子元素的个数将 子元素  从上到下排满父容器 间距 自动调节；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	body{
		text-align:center;
		}
	.div1{
		width:700px;
		height:150px;
		margin:auto;
		display:flex;
		flex-direction:column;
		justify-content:space-around;
		items-align:center;
		}
	.Red{
		background-color:red;
	}
	.Blue{
		background-color:blue;
	}
</style>
</head>

<body>
	
	<div class="div1 Red"><p>自动划分1</p></div>
	<div class="div1 Blue">
		<p>自动划分1</p>
		<p>自动划分2</p>
		<p>自动划分3</p>
	</div>
</body>
</html>

如果将flex-direction:column;改成flex-direction:row;则水平排列

 

2.设置display为table-cell布局  对齐垂直居中vertical-align:middle;

3.设置子元素行高等于父元素高度

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css居中对齐</title>
<style type="text/css">
	body{
		text-align:center;
		}
	.backRed{
		background-color: red;
	}
	.backBlue{
		background-color:blue;
	}
	.backGreen{
		background-color:green;
	}
	.div1{
		width:700px;
		height:150px;
		margin:auto;
		display:flex;
		flex-direction:column;
		justify-content:space-around;
		items-align:center;
		}
	.div2{
		width:700px;
		height:150px;		
		margin:auto;
		display:table-cell;	
		vertical-align:middle;
		}
	.div3{
		width:700px;
		height:150px;
		margin:auto;
		line-height: 150px;
		}
	.div3 h1{
		margin: 0 auto;
		}
	.div4{
		width:700px;
		height:150px;
		background-color:#0C9;
		margin:0 auto;
		}
</style>
</head>

<body>
	<div class="div1 backBlue"><h1>弹性盒子</h1>
	<!--样式直接作用于其子元素-->
	</div>
	<div class="div1 backRed"><p><a href="#">test20</a>&nbsp;<a href="#">test21</a><a href="#">test22</a>&nbsp;<a href="#">test23</a>&nbsp;</p></div>
	<div class="div2 backGreen"><h1>css设置为table布局</h1></div>
	<div class="div3 backBlue"><h1>height:150px;line-height: 150px</h1></div>
</body>
</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 云原生