CSS中的居中问题

BlueGem
225 阅读3分钟

1.容器没有设置宽高，宽高由文字撑开

HTML基础结构如下

<!DOCTYPE html>
<html>
<head>
	<title>flex</title>
	<style>
	    .outside{
                width:400px;
                height:400px;
                background-color:lightblue;
	    }
	    .inside{
	        background-color:orange;
	    }
	</style>
</head>
<body>
	<div class="outside"><div class="inside">文字应水平垂直居中</div></div>
</body>
</html>

方法一

文字居中: 因为容器由文字撑开，所以文字本来就居中
容器居中: 使用absolute定位，然后使用transform:translate(-50%,-50%);来进行修正

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

方法二

文字居中： 在容器上设置text-align:center;
容器居中： 在容器的父容器上设置display:flex;justify-content:center;align-items:center;

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

2.容器设置固定宽高

2.1 单行文本

HTML基础结构如下

<!DOCTYPE html>
<html>
<head>
	<title>flex</title>
	<style>
		.outside{
			width:400px;
			height:400px;
			background-color:lightblue;

		}
		.inside{
			width:200px;
			height:200px;
			background-color:orange;
		}

	</style>
</head>
<body>
	<div class="outside"><div class="inside">文字应水平垂直居中</div></div>
</body>
</html>

方法一

文字居中: 在容器上设置text-align: center; line-height: 容器高px;
容器居中: 使用absolute定位，然后使用transform:translate(-50%,-50%);或margin-left:容器宽的50%，margin-top:容器高的50%;来进行修正

.outside{
	position:relative;
}
.inside{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	line-height: 200px;
	text-align:center;
}

方法二

文字居中： 在容器上设置text-align: center; line-height: 容器高px;
容器居中： 在容器的父容器上设置display:flex;justify-content:center;align-items:center;

.outside{
	display:flex;
	justify-content:center;
	align-items:center;
}
.inside{
	line-height: 200px;
	text-align:center;
}

2.2多行文本

HTML基础结构如下

<!DOCTYPE html>
<html>
<head>
	<title>flex</title>
	<style>
		.outside{
			width:400px;
			height:400px;
			background-color:lightblue;
		}
		.inside{
			width:200px;
			height:200px;
			background-color:orange;
		}

	</style>
</head>
<body>
	<div class="outside"><div class="inside">文字应水平垂直居中<br>文字应水平垂直居中</div></div>
</body>
</html>

方法一

文字居中： 在容器上设置display: flex;justify-content:center; align-items:center;
容器居中： 使用absolute定位，然后使用transform:translate(-50%,-50%)或margin-left:容器宽的50%，margin-top:容器高的50%;来进行修正

.outside{
	position:relative;
}
.inside{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:flex;
	justify-content: center;
	align-items:center;
}

方法二

文字居中：在容器上设置display: flex;justify-content:center; align-items:center;
容器居中：在容器的父容器上设置display:flex;justify-content:center;align-items:center;

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

总结

总的来说，文字居中有两种方法：

  1. 文本的容器上设置text-align: center; line-height: 容器高px;（用于单行文本）
  2. 文本的容器上设置display:flex;justify-content:center;align-items:center;（既可用于单行也可用于多行文本）

容器居中有三种方法：

  1. 文本的容器上设置transform:translate(-50%,-50%); (既可用于文本容器宽高已知，又可用于宽高未知)
  2. 文本的容器上设置margin-left:容器宽的50%，margin-top:容器高的50%;（只能用于文本容器宽高已知的情况）
  3. 文本的容器的父容器上设置display:flex;justify-content:center;align-items:center;(既可用于文本容器宽高已知，又可用于宽高未知)
avatar
文章
阅读
粉丝