css中垂直和水平居中问题的解决

最新推荐文章于 2024-09-07 22:16:27 发布

加油，铁子！

最新推荐文章于 2024-09-07 22:16:27 发布

阅读量80

点赞数 1

分类专栏： web前端文章标签： css html5 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119273548

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

垂直居中

单行文本垂直居中：
给父元素设置line-height:父元素高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
				/* 其他属性元素水平居中 
				给父元素设置 text-align: center;
				*/
				text-align: center;
				
				/* 单行文本垂直居中
				给父元素设置line-height:父元素高度 */
				line-height: 100px;
			}
		</style>
	</head> 
	<body>
		<!-- 水平居中 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

水平居中

块属性元素水平居中：

给自己设置margin: 0 auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 水平居中 -->
		<!-- 块属性标签 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

其他属性元素水平居中：

给父元素设置 text-align: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				/* 块属性元素水平居中 
				 给自己设置margin: 0 auto;
				 */
				margin: 0 auto;
				/* 其他属性元素水平居中 
				给父元素设置 text-align: center;
				*/
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 水平居中 -->
		<!-- 块属性标签 -->
		<div>
			<span>hello</span>
		</div>
	</body>
</html>