垂直居中的几种方式

最新推荐文章于 2020-11-21 07:19:40 发布
最新推荐文章于 2020-11-21 07:19:40 发布
阅读量156 收藏
点赞数
分类专栏： CSS 文章标签： 垂直居中的5种方式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoma19941027/article/details/101308647
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			width: 300px;
			height: 300px;
			margin: 0 auto;
			border: 1px solid red;
		}
		.box2{
			width: 100px;
			height: 100px;
			border: 1px solid green;
		}

		/*方法一：根据已知高度写死，修改margin（必须知道父元素的高）
		.box2{
			margin-top:100px;
		}*/


		/*方法二：弹性伸缩盒（完美）
		.box1{
			display: flex;
			align-items: center;
		}*/


		/*方法三：绝对居中（内层盒子必须有宽高）
		.box1{
			position: relative;
			left: 0;
			top: 0;
		}
		.box2{
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
		}*/


		/*方法四：负的margin(必须知道box2的高度)
		.box1{
			position: relative;
			left: 0;
			top: 0;
		}
		.box2{
			position: absolute;
			top: 50%;
			margin-top: -50px;
		}*/
		

		/*方法五：transform*/
		/*.box2{
			margin-top: 50%;
			transform: translateY(-50%);
			因为transform 参照的是自身
		}*/

	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>
xiaoma121212
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
垂直居中的7种方法
Preserve
04-07 3387
1、水平垂直居中 垂直居中 div.center{ text-align:center; background:hsl(0,100%,97%); } div.center span{ wi
实现垂直居中的几种方式
RunningSnail
07-11 2万+
方式一：单行文本垂直居中 其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。 当然也有道友说其实这个地方设置height值其实完全没有必要，容器会根据line-height自动撑开。这个理论实际上是正确的，他的正确的前提在于该元素内只有文本节点。 但是如果父级元素不设置高度
CSS水平居中、垂直居中、垂直水平居中所有方法一网打尽！
阿嚏乱码的地方
02-19 430
今天介绍一下在css使用中用到的居中知识，一共以下3点： 水平居中 垂直居中 水平垂直居中 水平居中 水平居中需要考虑3点： 行内或是行内元素居中？ 块级元素居中？ 多个块级元素居中？ 1、行内或是行内元素居中： 这可以适用于inline, inline-block, inline-table, inline-flex 核心代码： .center-children{tex...
h5文字垂直居中_CSS中居中对齐元素的方法
weixin_39866487的博客
11-21 5159
文字text-align属性作用于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。p inline-block元素常见的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素一样，是可以在一行中连续排列的。令inline-block元素居中的第一步是将其转化为block元素，即保证...
垂直居中的几种方法
小丁的博客
03-27 165
1.让 line-height 属性值和 height 属性值相等来设置 div 元素居中.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } &lt;div class="center"&gt; &lt;p&gt;我是垂直居中的。&...
设置垂直居中的几种方法
fish_skyyyy的博客
10-15 3077
设置垂直居中的几种方法 自己知道的不多，所以去网上搜了几种办法，以后了解到了还会继续补充： （1）table-cell 将div的显示方式设置为表格，利用表格的vertical-align:middle属性： <div clss="wrapper"> <div class="cell"> <div>垂直居中</div> </div> </div> <style> .wrapper {d
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS3 不定高宽垂直水平居中的几种方式
01-19
这种方式兼容性不好 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9以下不支持transform属性 3、table + table-cell .father { ...
css实现垂直居中的几种方式（布局常用）
dengdongxia的博客
05-21 1万+
前提： html模板： &lt;div class="parent"&gt; &lt;div class="content"&gt;内容垂直居中&lt;/div&gt; &lt;/div&gt; 声明：以下示例，主要实现垂直居中的样式代码为加粗的部分 一、对单行元素进行垂直居中时 1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中 2、针...
div 垂直居中的六种方法
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
CSS中有哪些方法可以实现垂直居中（一）？
learning_web的博客
11-07 275
这里是修真院前端小课堂，每篇分享文从 本篇分享的是：【CSS中有哪些方法可以实现垂直居中？ 】 （1）背景介绍： 在前端开发过程中，对页面进行布局时，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端工程师的基本功。 （2）知识剖析： 几种常用到的垂直居中方法： 1、头部和顶部使用相同大小的padding值可以实现居中。 2、单行文本可以用li...
Tree Shaking概念详解
weixin_45820444的博客
09-28 2万+
Tree Shaking 值的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。 官方有标准的说法：Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination） 在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件
CSS 元素垂直居中的 6种方法
热门推荐
wolinxuebin的专栏
05-30 45万+
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left
css几种常见的水平垂直居中的方法！！！
梧桐落叶~~
11-03 2905
常见的水平垂直居中方法 1.先给父级元素设置水平居中 text-align:center 在给当前垂直的元素转换成行内块元素和垂直居中 display:inline-block; vertical-align:middle 在元素的后面不要回车，加上同级元素span，进行设置此参照物的高度等于父级元素100% display:inline-block; verti...
垂直水平居中的几种实现方式
飞鸿小子的博客
08-13 3万+
一、固定宽高： 1、margin 根据已知的宽高写死，不推荐 2、定位 + margin-top + margin-left .box-container{ position: relative; width: 300px; height: 300px; } .box-container .box { width:...
五种垂直居中方式
weixin_51175311的博客
10-20 737
五种垂直居中方式 需要居中设置的html和css样式 /*css样式*/ html, body { height: 100%; overflow: hidden; } .box { box-sizing: border-box; width: 100px; height: 100px; line-height: 100px; text-align: center; font-siz
qml 垂直居中 几种方式
最新发布
03-27
在QML中，有几种方式可以实现垂直居中的效果。以下是其中几种常用的方式： 1. 使用anchors.verticalCenter属性：可以将一个元素的垂直中心锚定到其父元素的垂直中心上。示例代码如下： ``` Rectangle { width: 200 height: 100 color: "red" anchors.verticalCenter: parent.verticalCenter } ``` 2. 使用Item的属性：可以通过设置Item的y属性来实现垂直居中。示例代码如下： ``` Item { width: 200 height: 100 color: "red" y: (parent.height - height) / 2 } ``` 3. 使用Column布局：可以使用Column布局来实现垂直居中，将需要居中的元素放置在Column布局中，并设置其alignment属性为Qt.AlignVCenter。示例代码如下： ``` Column { width: 200 height: 200 anchors.centerIn: parent Rectangle { width: 100 height: 100 color: "red" Layout.alignment: Qt.AlignVCenter } } ``` 4. 使用RowLayout布局：可以使用RowLayout布局来实现垂直居中，将需要居中的元素放置在RowLayout布局中，并设置其Layout.alignment属性为Qt.AlignVCenter。示例代码如下： ``` RowLayout { width: 200 height: 200 anchors.centerIn: parent Rectangle { width: 100 height: 100 color: "red" Layout.alignment: Qt.AlignVCenter } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值