【前端css篇-如何实现水平居中和垂直居中】

最新推荐文章于 2024-01-12 14:48:47 发布

忆承

最新推荐文章于 2024-01-12 14:48:47 发布

阅读量131

点赞数

文章标签：前端 css3

本文链接：https://blog.csdn.net/GR199717/article/details/130185497

版权

文章详细介绍了如何使用CSS实现元素的水平和垂直居中。对于水平居中，方法包括设置父元素text-align、使用block元素和margin、浮动及绝对定位，以及flex布局。对于垂直居中，提到了单行行内元素、多行行内元素、块级元素的绝对定位、flexbox布局以及伪元素等策略。

摘要由CSDN通过智能技术生成

<div style="text-align：center">
   <span>我要居中<span/>
<div/>

给行内元素追加一个父元素设置text-align：center
2. 普通流block（有宽度width）
设置margin：0 auto
3. 浮动

css.{
width:200px;
height:200px;
float:left://脱离文档流，margin：0 auto失效
position：relative；
left：50%；
margin-left：-100px；
}

css.{
//width:200px;
height:200px;
float:left://脱离文档流，margin：0 auto失效
position：relative；
left：50%；
transform：translateX（-50%）
}

css.{
//width:200px;
height:200px;
position：absolute；
left:0;
right:0;
margin:0 auto;
}

css.{
width:200px;
height:200px;
position：absolute；
left:50%;
right:0;
transform：translateX（-50%）//或者margin-left：-100px；
}

css.{
display：flex；
justify-content：center
}

1.单行的行内元素
子元素和父元素设置相同高度

father.{
	height:100px;
}
son.{
	line-height:100px
	margin:0;//p标签自带margin，要清除
}

2.多行的行内元素
给父元素设置
display: table-cell;
vertical-align:middle;
3.块级元素

father.{
	position:relative
}
son.{
	width:200px;
	height:200px;
	position：absolute；
	top:50%;
	transform：translateY（-50%）//或者margin-left：-100px；
}

4.flexbox

father.{
	display：flex；
	justify-content：center；
	align-item：center；
}
son.{
	width:200px;
	height:200px;
}

5.伪元素
在这里插入图片描述

关注