css 垂直居中

最新推荐文章于 2023-08-11 23:03:45 发布

想喝橙汁儿

最新推荐文章于 2023-08-11 23:03:45 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108013356

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

垂直居中

行内元素，可以设置line-height 与父级 height 相等
设置 margin/padding 居中
flex 居中设置 align-items:center
绝对定位居中

案例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>垂直居中案例</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #a124aa;
			margin: 0 auto;
		}
		.box>.main{
			width: 50px;
			height: 50px;
			background-color: aquamarine;
		}
		/* 上方是公共样式 */
		/* 让main在大盒子里居中 */
		/* 一 */
		.box1>p{
			line-height: 200px;
		}
		/* 方式二 */
		.box2{
			padding-top: 75px;
		}
		/* 方式三 */
		.box3{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		/* 方式四 */
		.box4{
			position: relative;
		}
		.box4>.main{
			position: absolute;
			top: 0;     /* 用于垂直居中 */
			bottom: 0; /* 用于垂直居中 */
			right: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="box box1">
		<!-- 垂直居中    内联元素span   和  块元素 p -->
		<p>123</p>
	</div>
	<div class="box box2">
		<!-- 垂直居中  方式二 -->
		<p class="main"></p>
	</div>
	<div class="box box3">
		<!-- 垂直居中  方式三 -->
		<p class="main"></p>
		<span>1234</span>
	</div>
	<div class="box box4">
		<!-- 垂直居中  方式四 -->
		<p class="main"></p>
	</div>
	
</body>
</html>

想喝橙汁儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css 垂直居中

垂直居中行内元素，可以设置line-height 与父级 height 相等设置 margin/padding 居中flex 居中设置 align-items:center绝对定位居中案例：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>垂直居中案例</title> <style type="text/css"> * {
复制链接

扫一扫

专栏目录