css之水平垂直居中篇

最新推荐文章于 2023-09-30 13:11:25 发布

给我一颗橙子

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量374

点赞数 1

分类专栏： css样式篇文章标签：垂直水平居中 css样式实现居中 css 行级元素居中块级元素实现居中

本文链接：https://blog.csdn.net/weixin_39534106/article/details/78155831

版权

css样式篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css垂直居中的方法有很多，今天没事干，就整理了一下

一、块级元素的垂直水平居中

1.固定宽高+position:absolute+margin：auto实现垂直水平居中（灰色区域为浏览器页面，红色为当前元素）

1）来看一个小栗子（只设置margin属性）：我们发现只设置margin属性的时候实现水平居中

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background-color: red;
			width: 100px;
			height: 100px;
			margin: auto;			/*设置margin属性*/
		}
	</style>
</head>

<body>
	<div>1</div>	
</body>

这是效果图：

2）当我们给css加下面这行代码时：我们发现原来水平居中的元素又回到了原点

position: absolute;

效果图如下：

3）当我们给css样式加上下面的代码时发现元素实现了垂直加水平居中

	top:0;
	left:0;
	right:0;
	bottom:0;

效果图如下：

是不是很神奇，其实主要是因为当给元素绝对定位的时候，元素脱离当前的文档流，独占一整个页面，当设置了top等值时，相当于给当前页面设置边框

2.在父元素里面的子元素实现居中，并且让父元素也实现居中

来看下面的例子：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: grey;
		}
		div{
			background-color: black;		
			width:500px;
			height: 300px;
			margin: auto;			/*这款设置当前元素居中，并且绝对定位和top等值都让当前元素居中*/
			display: flex;			/*设置弹性盒模型，并且设置子元素的对齐方式为居中*/
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
		}
		p{
			background-color: red;
			margin: auto;			/*加上这句代码以后就成功的垂直水平居中了*/
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div>
		<p>1</p>
	</div>
	
</body>

注意：块级元素的垂直居中也可以给父元素设置display:table-cell和vertical-algin：middle

二、行级元素的垂直水平居中

1.单行文本元素的时候，使用text-algin:center;和line-height进行垂直水平居中

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background-color: grey;
			height:50px; 
			width: 200px;
			text-align: center;		/*让在这个元素里面的内容水平居中显示*/
		}
		span{
			background-color: pink;
			line-height: 50px;		/*让文本元素的行高等于父元素的高，进行垂直居中*/
		}
	</style>
</head>
<body>
	<div>
		<span>我能不能居中啊</span>
	</div>	
</body>

效果图：

2.多行文本居中（垂直居中：dispaly:table-cell;+vertical:middle；水平居中：margin:auto）：

看下面的小栗子

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			background-color: grey;
			height:300px; 
			width: 300px;
			text-align: center;			/* 使元素里面的内容水平居中 */
			display: table-cell;		/* 以下两句代码是元素按照table表格显示，并垂直居中 */
			vertical-align: middle;
		}
		span{
			background-color: pink;;
		}
	</style>
</head>
<body>
	<div>
		<span>我能不能居中啊</span><br>
		<span>我能不能居中啊</span><br>
		<span>我能不能居中啊</span><br>
		<span>我能不能居中啊</span><br>
	</div>	
</body>

给我一颗橙子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之水平垂直居中篇

css垂直居中的方法有很多，今天没事干，就整理了一下一、块级元素的垂直水平居中1.固定宽高+position:absolute+margin：auto实现垂直水平居中（灰色区域为浏览器页面，红色为当前元素）1）来看一个小栗子（只设置margin属性）：我们发现只设置margin属性的时候实现水平居中 Document div{ background-co
复制链接

扫一扫