JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div class="container">
		<p>这是display:inline-block实现水平垂直居中的终解</p>
	</div>

CSS

.container {
			width: 200px;
			height:200px;
			text-align:center;
			font-size:0;
			background: blue;
		}
		.container:after {
			content: ".";
			display:inline-block;
			*display:inline;
			*zoom:1;
			width:0;
			height:100%;
			vertical-align:middle;
		}

		p {
			display:inline-block;
			*display:inline;
			*zoom:1;
			vertical-align:middle;
			font-size:16px;
		}