css的10种盒子水平垂直居中方法

最新推荐文章于 2022-05-05 10:29:03 发布

银河之上的你

最新推荐文章于 2022-05-05 10:29:03 发布

阅读量3.3k

点赞数 6

分类专栏： #前端面试题 css

本文链接：https://blog.csdn.net/qq_40214201/article/details/107384093

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

#前端面试题

2 篇文章 0 订阅

订阅专栏

<body>
<div class="wrap allCenter">//父元素
<div class= "item allCenterChild"></div>//子元素
</div>
</body>

第一种：弹性布局（flex布局）：父级对子元素进行垂直居中，居中属性只需要定义在父元素中

<style>
.wrap{//【基础设置】父元素：宽高各600px，紫色边框
width: 600px;
height: 600px;
border: 2px solid purple;
}
.item{//【基础设置】子元素:宽高各150px，绿色
   width：150px;
   height:150px;
   background: green;
}
//第一种
.allCenter{//子元素不受影响
	display:flex;//设置弹性布局，display属性选为flex
	justify-content: center;//让子元素水平居中
	align-items:center;//让子元素垂直居中
}
.allCenterChild{//父元素不受影响
}
</style>

第二种：让子元素用外边距自动顶开

.allCenter{//子元素不受影响
	display:flex;//设置弹性布局，display属性选为flex
}
.allCenterChild{//父元素不受影响
	margin:auto;//等价于margin:auto auto auto auto;
}

第三种;

.allCenter{//子元素不受影响
	display:flex;//设置弹性布局，display属性选为flex
}
.allCenterChild{//父元素不受影响
	align-self:center;//脱离父级的align-items（垂直居中）属性，重写一遍，设置了垂直居中
	margin：0 auto;//设置水平居中
}

第四种: Grid布局，水平居中和垂直居中的属性定义在子元素中，不在父元素中

.allCenter{//子元素不受影响
	display:grid;//设置grid布局，display属性选为grid，定义在父级上面的属性
}
.allCenterChild{//父元素不受影响，
	justify-self：center;//水平居中，横向
	align-self：center;//垂直居中
}

第五种：子元素的外边框50%减去盒子高度的一半（子元素盒子高度为150px）

.allCenterChild{
	margin: calc(50%-75px) auto 0 auto;
}

第六种：用绝对定位,子元素的上右下左距离都是一样的，上下左右都设置为0，【拔河效应】（元素宽高需要提前设定）

.allCenter{//父元素属性可写可不写
			position:relative;
		}

.allCenterChild{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;//这时候还没有垂直居中，仍然在左上角
	margin:auto;//加上margin属性子元素才能垂直居中
}

第七种：绝对定位,子元素使用transfrom属性，【元素宽高无需设定】

.allCenterChild{
	position:absolute;
	left:50%;//向下移动50%
	right:50%;//向下移动50%
	//此时子元素的左上直角在父元素的中心点中，接下来需要把子元素的中心点移动到父元素的中心点位置中
	transfrom:translate(-50%,-50%)//变形，子元素向左移动自身宽度的50%，向上移动自身高度的50%,向下向右移动则为正值
	
}

第八种：利用table的特征，只对表格有效
*在子元素没有设置宽高度和数量时使用
注意：table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

.allCenter{
	display:table-cell;//设置为表格单元
	vertical-align：middle;//设置表格属性，此时垂直居中了
	text-align：center；//此时没有用的，子元素此时为块元素，，不是行内元素，text-align无效，需要对子元素进行处理称为行内块元素
}
.allCenterChild{
   display： inline-block;//子元素变为行内块元素，加上父元素的text-align属性，此时水平居中了
}

第九种：内容只有一行的时候可以用，其他的不可以使用，对文字进行水平垂直居中
父级元素：div 子元素：行内的文字

<stytle>
.oneline{
	width:600px;
	height:80px;
	background:pink; //基本属性
	font-size：25px；//调节字体
	text-align：center；//水平居中
	line-height：80px；//行高跟父级的高度是一样的
	}
</stytle>
<div class= "oneline">
content，文字只有一行
</div>

第十种：利用margin-top和margin-left【元素宽高需要设定】

.allCenterChild{
			position:absolute;
			top:50%;
			margin-top:-10px;
			left:50%;
			margin-left:-50px;
		}

银河之上的你

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
css的10种盒子水平垂直居中方法

<body><div class="wrap allCenter">//父元素<div class= "item allCenterChild"></div>//子元素</div></body>第一种：弹性布局（flex布局）：父级对子元素进行垂直居中，居中属性只需要定义在父元素中<style>.wrap{//【基础设置】父元素：宽高各600px，紫色边框width: 600px;height: 600p
复制链接

扫一扫