CSS布局——一个DIV上下左右水平居中垂直居中布局

最新推荐文章于 2023-09-11 18:44:00 发布

qq591840685

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量1.9k

点赞数 3

分类专栏： html+css教程文章标签： css html5 html

本文链接： https://blog.csdn.net/qq591840685/article/details/108938735

版权

html+css教程专栏收录该内容

8 篇文章 3 订阅

订阅专栏

一、位于父类左上角

图片演示

html代码

    <div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}

一、位于父类上部水平居中

图片演示

html代码

    <div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
	margin: 0 auto;/*重要*/ /*水平居中*/
}

一、位于父类右上角

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	justify-content:flex-end;/*重要*/ /*在结尾处*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}

一、位于父类左侧垂直居中

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: center; /*重要*/ /*子类居中*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}

一、位于父类中心

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码（方法一）

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: center; /*重要*/ /*子类居中*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
	margin: 0 auto; /*重要*/ /*子类居中*/
}

css代码（方法二）

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
	margin: 0 auto; /*重要*/ /*子类居中*/
	align-self: center; /*重要*/ /*子类居中*/
}

一、位于父类右侧垂直居中

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: center;/*重要*/ /*垂直方向居中*/
	justify-content: flex-end;/*重要*/ /*水平方向底部*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}

一、位于父类左下角

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: flex-end;/*重要*/ /*横向上底部*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}

一、位于父类下部水平居中

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: flex-end;/*重要*/ /*横向上底部*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
	margin: 0 auto;/*重要*/ /*水平居中*/
}

一、位于父类右下角

图片演示

html代码

	<div class="div-big">
		<div class="div-small">1</div>
	</div>

css代码

/* 父类 */
.div-big{
	width: 600px;
	height: 400px;
	background-color: lightgreen;/*绿背景色*/
	display: flex;/*重要*/ /*横向排列*/
	align-items: flex-end;/*重要*/ /*垂直方向底部*/
	justify-content: flex-end;/*重要*/ /*水平方向底部*/
}
/* 子类 */
.div-big .div-small{
	width: 100px;
	height: 100px;
	background-color: lightcoral;/*红背景色*/
}