通用的css设置子元素水平和垂直居中的方法

春风得意之时

已于 2022-05-12 17:19:59 修改

阅读量202

点赞数

分类专栏： css 文章标签： css vue.js javascript 开发语言 typescript

于 2022-04-27 13:51:18 首次发布

本文链接：https://blog.csdn.net/u012513962/article/details/124448460

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css设置子元素水平和垂直居中的方法，抛开定位，flex布局以及grid布局

- 水平居中
- 垂直居中

水平居中

如果子元素为行内元素，可以在父元素设置：text-align:center;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.parent{
			width: 500px;
			height: 500px;
			background: red;
			text-align: center;
		}
		.parent .child{
			width: 300px;
			height: 300px;
			background: blue;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">	
		</div>
	</div>
</body>
</html>

效果：
在这里插入图片描述

如果子元素不是行内元素，但是知道子元素的具体宽度，则可以在子元素设置 margin:0 auto;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>子元素固定宽度</title>
	<style type="text/css">
		.parent{
			width: 500px;
			height: 500px;
			background: red;
		}
		.parent .child {
			width: 200px;
			height: 200px;
			background: pink;
			/* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child"></div>
	</div>
</body>
</html>

效果：

在这里插入图片描述

垂直居中

父元素设置line-height为其高度height, 子元素设置：display:inline-block;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>垂直居中</title>
	<style type="text/css">
		/*
		若元素是行内块级元素, 基本思想是子元素使用display: inline-block, 
		vertical-align: middle;并让父元素行高等同于高度
		*/
		.parent{
			width: 888px;
			height: 888px;
			line-height: 888px;
			background: red;
		}
		.parent .child{
			width: 100px;
			height: 100px;
			display: inline-block;
			vertical-align: middle;
			background: yellow;
		}
	</style>
</head>
<body>
   <div class="parent">
   	<div class="child"></div>
   </div>
</body>
</html>