CSS 设置垂直居中

卿本无忧 2023-04-16 原文

一、设置文字垂直居中

1、line-height 使文字垂直居中

<template>
	<div class="container">
		line-height 使文字垂直居中
	</div>
</template>

<style>
	.container{
		margin: 20px 0px;
		width: 100%;
		height: 100px;
		line-height: 100px;
		background-color: pink;
	}
</style>

2、flex布局使文字垂直居中

 <template>
 	<div class="container">
 		flex布局 使文字垂直居中
 	</div>
 </template>
 
 <style>
 	.container{
 		margin: 20px 0px;
 		width: 100%;
 		height: 100px;
 		display: flex;
		align-items: center;
		background-color: pink;
 	}
 </style>

3、使用display和vertical-align 使文字垂直居中

3.1 display: table和vertical-align: middle

<template>
	<div class="parent">
		<div class="child">
			<div>使用display和vertical-align 使文字垂直居中</div>
			<div>使用display和vertical-align 使文字垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		display: table;
		width: 100%;
		height: 100px;
		background-color: skyblue;
	}

	.child {
		display: table-cell;
		vertical-align: middle;
		background-color: pink;
	}
</style>

3.2 display: table-cell和vertical-align: middle

<template>
	<div class="parent">
		<div class="child">
			<div>使用display和vertical-align 使文字垂直居中</div>
			<div>使用display和vertical-align 使文字垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100px;
		background-color: skyblue;
		display: table-cell;
		vertical-align: middle;
	}

	.child {
		background-color: pink;
	}
</style>

二、设置块状元素垂直居中

1、使用绝对定位和transform 使块状元素垂直居中（未知块状元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和transform 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和transform 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		background-color: pink;
	}
</style>

2、使用flex布局使块状元素垂直居中（未知块状元素高度）

2.1 display: flex和align-items: center

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		background-color: pink;
	}
</style>

2.2 display: flex和align-self: center

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
			<div>
				使用flex布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: flex;
		background-color: skyblue;
	}

	.child {
		align-self: center;
		width: 100%;
		background-color: pink;
	}
</style>

3、使用绝对定位和margin 使块状元素垂直居中（已知块状元素高度）

3.1 绝对定位和margin: auto

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
	}

	.child {
		width: 100%;
		height: 100px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: pink;
	}
</style>

3.2 绝对定位和margin-top

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
			<div>
				使用绝对定位和margin 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		background-color: skyblue;
		position: relative;
	}

	.child {
		width: 100%;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;/* 高度的一半 */
		background-color: pink;
	}
</style>

4、使用padding 使块状元素垂直居中（已知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>使用padding 使块状元素垂直居中</div>
			<div>使用padding 使块状元素垂直居中</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 300px;
		background-color: skyblue;
		padding: 100px 0;
		box-sizing: border-box;
	}

	.child {
		position: relative;
		width: 100%;
		height: 100px;
		background-color: pink;
	}
</style>

5、使用grid布局使块状元素垂直居中（未知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用grid布局 使块状元素垂直居中
			</div>
			<div>
				使用grid布局 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100vh;
		display: grid;
		background-color: skyblue;
	}

	.child {
		align-self: center;
		width: 100%;
		background-color: pink;
	}
</style>

6、使用伪元素:before 使块状元素垂直居中（未知元素高度）

<template>
	<div class="parent">
		<div class="child">
			<div>
				使用伪元素:before 使块状元素垂直居中
			</div>
			<div>
				使用伪元素:before 使块状元素垂直居中
			</div>
		</div>
	</div>
</template>

<style>
	.parent {
		width: 100%;
		height: 100px;
		display: block;
		background-color: skyblue;
	}
	
	.parent:before {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}

	.child {
		width: 100%;
		display: inline-block;
		vertical-align: middle;
		background-color: pink;
	}
</style>

CSS 设置 E5 块状 E7 前端 html

有关CSS 设置垂直居中的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2
我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U
ruby - 在 Ruby 中，垂直线是什么？ - 2
1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？最佳答案它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru