css水平垂直居中(不定高)的三种方法

最新推荐文章于 2025-05-22 11:23:59 发布

huqiang199052

最新推荐文章于 2025-05-22 11:23:59 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

分类专栏：效果样式文章标签：垂直居中

本文链接：https://blog.youkuaiyun.com/huqiang199052/article/details/101050502

效果样式专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种使用CSS实现子元素在父元素中垂直居中的方法：一是利用Flex布局，二是通过Table Cell属性，三是结合定位与Transform属性。每种方法都有其适用场景和独特优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <style>
	   .parent{			
			height:200px;
			width:200px;
			border:1px solid #000;
		}
		.son{
			width:100px;
			background: red;
		}
	</style>

	<div class="parent one">
		<div class="son">one垂直居中垂直居中垂直居中垂直居中垂直居中</div>
	</div>		
	<div class="parent two">
		<div class="son">two垂直居中垂直居中垂直居中垂直居中垂直居中</div>
	</div>
	<div class="parent three">
		<div class="son">three垂直居中垂直居中垂直居中垂直居中垂直居中</div>
	</div>

第一种：这里用的是css3的display:flex属性。
display: flex; //flex弹性布局
justify-content:center; //元素在主轴上(页面)排列顺序
align-items:center; //元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

     .one{
			display: flex;
			align-items:center;
			justify-content:center;
		}

第二种：用 display: table-cell实现。
display: table-cell； //元素以表格单元格的形式呈现
vertical-align: middle; //把元素放置在父元素的中部。
text-align: center; //水平居中

	 .two{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
	  .two .son{
			display: inline-block; 
		}

第三种：用定位和css3的transform属性来实现。
position: relative; //相对定位
position: absolute; //绝对定位
transform: translate(x,y); //2D转换

     .three{
			position: relative;
		}
	 .three .son{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

效果：
三种方式

小小前端，希望大家多提提意见，共同成长。