CSS 在固定高度DIV内垂直对齐

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 在固定高度DIV内垂直对齐相关的知识，希望对你有一定的参考价值。

<div class="valign" style="height: 500px">
	<div class="vertical">
		<div id="center">
			This line will be vertically centered at 250px inside a 500px high DIV
		</div>
	</div>
</div>


/* Vertical align -- You must specifiy height on "valign" element */
.valign				{ position: relative; }
.valign[class]			{ display: table; position: static; }
.valign .vertical		{ position: absolute; top:  50%; }
.valign .vertical[class]	{ display: table-cell; vertical-align: middle; position: static; }
.valign .center			{ position: relative; top: -50%; }
.valign .center[class]		{ position: static; }

以上是关于CSS 在固定高度DIV内垂直对齐的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 div（使用 btn 类）中的文本垂直对齐，使用 CSS Grid（并且没有 flexbox）时没有固定高度

如何在固定高度的div内垂直居中动态高度的图像？

CSS：当不知道div的固定大小时垂直对齐div

CSS垂直对齐段落到div [重复]

css对齐 挖坑~

图片水平垂直居中对齐的四种做法