css 元素居中

最新推荐文章于 2022-10-24 19:44:41 发布

原创最新推荐文章于 2022-10-24 19:44:41 发布 · 223 阅读

CC 4.0 BY-SA版权

文章标签：

3 篇文章

订阅专栏

该博客主要介绍前端元素的居中方法，包括水平居中（元素有宽高和未知宽度两种情况）、垂直居中以及水平垂直都居中。详细阐述了如margin、text - align、flex、table - cell等多种实现居中的方式，还提及了CSS 3属性fit - content的应用。

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

	元素有宽高	未知宽高
水平居中	1. margin 2. text-align 3. position:absolute和0 4. position:absolute和负margin 5. translateX 6. flex 7. table-cell	1. translateX 2. flex 3. table-cell 4. fit-content
垂直居中	1.vertical-align 2. position:absolute和0 3. position:absolute和负margin 4. translateX 5. flex 6. table-cell 7. display: -webkit-box	1. translateY 2. flex 3. table-cell 4. display: -webkit-box
水平垂直都居中

================================= 具体内容 ==============================
在这里插入图片描述
文档结构

<div class='out'>
	<div class='inner'>我是居中的元素</div>
</div>

.inner{
  	margin: 0 auto; //该方法只能实现水平居中
}

适合文本元素的居中

.inner{
	text-align : center; //让inner盒子里面的文字水平居中
}

.out{
	display: relative;
}
.inner{
	position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.out{
	display: relative;
}
.inner{
	position:absolute;
	left: 50%;
	margin-left: -宽度/2;    //这里的宽度是inner的宽度
}

.out{
	position: relative;
}
.inner{
	position:absolute;
	left: 50%; 
	transform: translateX(-50%);
}

.out{
	display:flex;
	justify-content: center;
}

给父元素设置弹性盒子，justify-content设置盒子里面的内容水平居中

.out{
	display: table-cell; 
	text-align: center
}
.inner{
	display: inline-block;
	width: xxxx;
	height: xxxx;
}

利用表格设置父元素，需要给子元素display: inline-block;才能设置宽高

.out{
	position: relative;
}
.inner{
	position:absolute;
	left: 50%; 
	transform: translateX(-50%);
}

.out{
	display:flex;
	justify-content: center;
}

给父元素设置弹性盒子，justify-content设置盒子里面的内容水平居中

.out{
	display: table-cell; 
	text-align: center
}

.inner{
	width: fit-content; 
	margin: 0 auto;
}

利用CSS 3属性会自动给盒子一个自适应宽度

==========未完待续

垂直居中

position: absolute;top: 0; bottom: 0; margin: auto;
position:absolute;
top: 50%;
margin-top: -宽度/2;
//前提父元素设置position:relative;
position:absolute;
top: 50%;
transform: translateY(-50%);
display: flex;align-items: center;
display: table-cell; vertical-align: middle;
加一个同级的父元素设置： float: left; height: 50%; margin-bottom: -100px; 父元素设置： clear:both; height:240px; position:relative; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical;

position:absolute;
top: 50%;
transform: translateY(-50%);
display: flex;align-items: center;
display: table-cell; vertical-align: middle;
加一个同级的父元素设置： float: left; height: 50%; margin-bottom: -100px; 父元素设置： clear:both; height:240px; position:relative; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-orient: vertical;

水平垂直都居中