css元素如何居中

最新推荐文章于 2024-06-05 15:27:04 发布

挑之夭夭

最新推荐文章于 2024-06-05 15:27:04 发布

阅读量647

点赞数 22

分类专栏：前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_42808052/article/details/127846647

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【1】水平居中布局
【2】垂直居中布局
【3】居中布局

【1】水平居中

1. inline-block

实现方法

父元素:text-align:center
子元素:display:inline-block

text-align：是为文本内容设置的对其方式，有 right left center

display：block是块级元素，但是inline设置的是内联元素，width和height是不生效的，但是inline-block是（块级加内联），是可以正常设置weidth和height

parent{
		width: 100%;
		height: 200px;
		text-align: center;
	}
.child{
		width: 200px;
		height: 200px;
		display: inline-block;
	}

在这里插入图片描述

优缺点

优点：浏览器兼容性好
缺点:text-algin 属性具有继承性，导致子元素的文本也是居中显示

解决方案

在子元素里设置 text-align 属性

parent{
		width: 100%;
		height: 200px;
		text-align: center;
	   }
.child{
		width: 200px;
		height: 200px;
		display: inline-block;
		text-align: left;
	  }

在这里插入图片描述

2. magin属性

实现方法

子元素:display:table/block; margin:0 auto

.child{
		width: 200px;
		height: 200px;
		display: table;
		margin: 0 auto;
	}

在这里插入图片描述

优缺点

优点：只需要对子元素进行设置
缺点:如果子元素脱离文档流的时候，margin无效

3. postion属性

实现方法

.child{
		width: 200px;
		height: 200px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

在这里插入图片描述

优缺点

优点：父元素脱离文档流，不影响子元素的居中效果
缺点:新属性，浏览器兼容性不好

【2】垂直居中

1. display&&vertical-align属性

实现方法

vertical-align是设置文本对齐方式的

.parent{
		width: 400px;
		height: 500px;
		background: gray;
		display: table-cell;
		vertical-align: middle;
	}

在这里插入图片描述

优缺点

优点：浏览器兼容性好
缺点:vertical-align具有继承性，子元素都会垂直居中对齐

2. postion属性

实现方法

vertical-align是设置文本对齐方式的

.parent{
		width: 400px;
		height: 500px;
		background: gray;
		position: relative;
	}
.child{
		width: 200px;
		height: 200px;
		background: purple;
		color: #fff;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

在这里插入图片描述

优缺点

优点：父元素是否脱离文档流，不影响子元素的居中效果
缺点:新属性兼容性不好

【3】水平居中&&垂直居中

1. 水平方向： table+margin；竖直方向：table-cell+vertical-algin

实现方法

	.parent{
			width: 400px;
			height: 500px;
			background: gray;
			display: table-cell;
			vertical-align: middle;
		}
	.child{
			width: 200px;
			height: 200px;
			background: purple;
			color: #fff;
			display: table;
			margin: 0 auto;	
		}

在这里插入图片描述

2. postion属性

实现方法

			.parent{
				width: 400px;
				height: 500px;
				background: gray;
				position: relative;
			}
			.child{
				width: 200px;
				height: 200px;
				background: purple;
				color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}

在这里插入图片描述

3. flex属性

实现方法

	.parent{
		width: 400px;
		height: 500px;
		display: flex;
		background: gray;
		flex-direction: column;
		justify-content: center;
	}
	.child{
		width: 200px;
		height: 200px;
		background: purple;
		color: #fff;
		margin: 0 auto;
	}

![在这里插入图片描述](https://img-blog.csdnimg.cn/0e8a100575664ad992eab8c4a9c31e30.png

4. margin-top属性

实现方法（此方法并不能实现居中显示）

	.parent{
		display: table;
	}
	.child{
	    margin:0 auto;
		margin-top: 50%;
		transform:translateY(-50%) ;
	}

遇到问题

父元素的第一个子元素的上边距margin-top如果碰不到有效的border就会不断一层一层的找，找不到就把margin-top属性加载最高级元素的身上。

在这里插入图片描述

实现方法（能实现居中显示）

   .parent{
			width: 400px;
			height: 500px;
			background: gray;
			position: relative;
		}
	.child{
			width: 200px;
			height: 200px;
			background: purple;
			text-align: center;
			line-height: 200PX;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -100px;
			margin-top: -100px;
		}

两列布局

float方法

实现方法

<body>
		<div class="child1"></div>
		<div class="child2"></div>
		<style>
			.child1{background: blue;width:200px ;height: 200px;float: left}
			.child2{background: pink;width: 100%;height: 200px;margin-left: 200px;}
	</style>
</body>