css 垂直居中

時間 2019-12-12

標籤 css 垂直居中欄目 CSS 简体版

原文原文鏈接

　　今天端午節，可苦逼的是還得加班，不過三倍工資，開心多了，第一次拿，想一想內心彷佛還有點小激動，好了，扯到爲止，進入正題css

　　今天偶然看到一個垂直居中的好方法，元素未知高度，未知高度，未知高度（重要的話說三遍），採用僞類 + vertical-align:middle 方式,html

　　先上代碼瀏覽器

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.main {
			width: 400px;
			height: 200px;
			background-color: #eee;
			text-align: center;
		}
		.main:after{
			display: inline-block;
			content: '';
			height: 100%;
			width: 0%;
			vertical-align: middle;
		}
		.con{
			display: inline-block;vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="con">test, 我是垂直居中的麼？</div>
	</div>
</body>
</html>

　　父元素添加僞類，並將僞類width置爲0，添加vertical-align:middle, 設置元素display： inline-block 或者 display： inline均可wordpress

　　這彷佛是如今垂直居中的最好方法，既不用考慮瀏覽器版本的問題，也能夠兼容大部分瀏覽器ui

　　原理：spa

　　　　1. 一個display：inline-block 元素高度等於父元素高度，垂直居中，後面的img元素也垂直居中，代碼以下htm

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box{
　　width:300px;
　　height:200px;
　　background-color: #eee;
}
.box img {
　　width: 100px;
　　vertical-align: middle;
　　text-align: center;
}
.con {
　　display: inline-block;
　　width: 100px;height: 100%;
　　background-color: red;
　　vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
　　<div class="con">hello,波先生</div>
　　<img src="./test/0.jpg">
</div>
</body>
</html>

　　效果如圖：blog