前端垂直居中推荐方法

前端垂直居中推荐方法

在写web前端的时候,水平居中一般没有任何争议。有争议的主要在垂直居中的处理上面。
一般来说垂直居中有这样的几种办法。

• 1. 先将元素display: inline-block，再调整margin-top的值来实现。
• 2. 先将元素display: inline-block，再将元素的position: relative，调整top的值来实现。
• 3. 先将元素display: inline，再将元素line-height设置为该元素所在行的最大值。例：

	<style>
		body{
			margin: 0px;
		}
		.header{
			height: 60px;
			background-color: lightblue;
		}
		.companyNameA{
			background-color: red;
			text-decoration: none;
			color: orange;
			font-size: 35px; 
			font-weight: bold;
			margin-left: 15%;
			
			/* 将元素line-height设置为该元素所在行的最大值 */
			line-height: 60px;
		}
	</style>
	<div class="header">
		<a class="companyNameA" href="/">公司名称</a>
	</div>

效果如图：

• 4. （以上三种都不能 “很好地解决整行中所有元素都需要垂直居中的场景” ，仅适用于单个元素的垂直居中，在此提供一个适用于整行中所有元素居中的方法，也适用于单个元素）。
  思路：
  ①假定一个条件：既然是放在一行中来布局，则有理由认为所有行内元素的高度均小于或等于整行的高度；
  ②放置一个作为垂直居中基准的【高度等于行高、无宽度】div。
  ③添加行内子元素并设置显示方式和对齐方式。
  ④处理子元素间空隙问题。

示例如下（小编希望给大家看到是否处理子元素间空隙的情况，因此提供了2组示例）：

【未处理子元素间空隙示例】：

	<style>
		body{
			margin: 0px;
		}
		.header{
			height: 60px;
			background-color: lightblue;
		}
		.layoutDiv{
			/* 放置一个作为垂直居中基准的【高度等于行高、无宽度】div */
			display: inline-block;
			vertical-align: middle;
			height: 60px;
			/* 可适当设置width和显示背景色，以方便布局 */
			width: 0px;
			/* background-color: orange; */
		}
		.companyNameA{
			background-color: red;
			text-decoration: none;
			color: orange;
			font-size: 35px; 
			font-weight: bold;
			margin-left: 15%;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherDiv{
			height: 30px;
			width: 100px;
			background-color: pink;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherContentTest{
			margin: 0px;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
	</style>
	<div class="header">
		<div class="layoutDiv"></div>
		<a class="companyNameA" href="/">公司名称</a>
		<div class="otherDiv"></div>
		<h1 class="otherContentTest">test</h1>
	</div>

效果如图：

【已处理子元素间空隙示例】：

	<style>
		body{
			margin: 0px;
		}
		.header{
			height: 60px;
			background-color: lightblue;
			/* 处理子元素间空隙问题 */
			font-size: 0px;
		}
		.layoutDiv{
			/* 放置一个作为垂直居中基准的【高度等于行高、无宽度】div */
			display: inline-block;
			vertical-align: middle;
			height: 60px;
			/* 可适当设置width和显示背景色，以方便布局 */
			width: 0px;
			/* background-color: orange; */
		}
		.companyNameA{
			background-color: red;
			text-decoration: none;
			color: orange;
			font-size: 35px; 
			font-weight: bold;
			margin-left: 15%;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherDiv{
			height: 30px;
			width: 100px;
			background-color: pink;
			
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherContentTest{
			font-size: 25px;
			margin: 0px;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
	</style>
	<div class="header">
		<div class="layoutDiv"></div>
		<a class="companyNameA" href="/">公司名称</a>
		<div class="otherDiv"></div>
		<h1 class="otherContentTest">test</h1>
	</div>

效果如图：

说明：究其原因，是由于行内元素的显示受到了2个因素的同时影响：行内最高元素的高度、垂直对齐方式（vertical-align）。小编的这个小思路，则是直接将这2个因素固定，即：通过放置一个[基准div]使得行内最高元素的高度等于行高、垂直对齐方式设置为middle。如果有更好、更轻松的办法，欢迎评论区指导指正。

• 5. 妙用css的before或after替代4中的layoutDiv

	<style>
		body{
			margin: 0px;
		}
		.header{
			height: 60px;
			background-color: lightblue;
			/* 处理子元素间空隙问题 */
			font-size: 0px;
		}
		.header:before,.header:after{            // 此处使用before或者after其中一个其实就可以了，为了展示代码这里写2个
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
			height: 100%;                        // 此处写100%更通用
			content: "";                         // 此行不能省去，省去无垂直居中效果
		}
		.companyNameA{
			background-color: red;
			text-decoration: none;
			color: orange;
			font-size: 35px; 
			font-weight: bold;
			margin-left: 15%;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherDiv{
			height: 30px;
			width: 100px;
			background-color: pink;
			
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
		.otherContentTest{
			font-size: 25px;
			margin: 0px;
			/* 设置显示方式和对齐方式 */
			display: inline-block;
			vertical-align: middle;
		}
	</style>
	<div class="header">
		<a class="companyNameA" href="/">公司名称</a>
		<div class="otherDiv"></div>
		<h1 class="otherContentTest">test</h1>
	</div>