当前位置：首页 > article >正文

Html css水平居中+垂直居中+水平垂直居中的方法总结

article 2024/11/14 1:24:45

1. Html css水平居中+垂直居中+水平垂直居中的方法总结

1.1. Html 元素

1.1.1.元素宽高特点

（1）块级元素（如div）：独占一行，不和其他元素在一起，可以设置宽和高；当没设置宽和高时，宽度和父级宽度一样，高度由内容的高度决定；当设置宽和高时，元素的宽高就是设置值，当内容超过宽高值时，元素宽高值也不变高，会溢出。
（2）行级元素（如span）：不会独占一行，和其它元素在一起，不可以设置宽和高，由里面的内容决定；设置的宽高无效。
（3）行内块级元素（如img）：不会独占一行，可以和其它元素在一起，可以设置宽和高；当没设置宽和高时，宽高有元素内容决定；当设置宽和高时，元素内容宽高为设置值。
元素宽高特点

1.1.2. 元素类型转换

（1）块级元素
常用的有div,所有布局元素，h1-h6，p，ul，li…
（2）行级元素
常用的有a，span，strong，b，i，sub，sup…
（3）行间块级元素
常用的有img，input，video，audio…
（4）嵌套关系：块级元素可以嵌套块级元素、行级元素、行内块级元素；行级元素不可以嵌套块级元素，如需嵌套，需要把行级元素转化成块级元素再嵌套（使用css）；行内块级元素可以嵌套行级元素，不能嵌套块级元素。
（5）注意：h1-h6，p不能嵌套块级元素。
（6）行级、行内块级元素转块级元素，任何元素都可以进行类型转换

display: block;

（7）行级转块级代码

<head>
		<meta charset="UTF-8">
		<title>CSS简介</title>
		<style type="text/css">
			a {
				background: red;
				display: block;
				width: 200px;
				height: 80px;
		</style>
	</head>
	<body>
		<a href="">我要自学网</a>
	</body>

（8）块级元素转行级元素，任何元素都可以进行类型转换

display: inline;

（9）块级元素转行内块级级元素，任何元素都可以进行类型转换

display: inline-block;

（10）块级元素转行级元素代码

<head>
		<meta charset="UTF-8">
		<title>CSS简介</title>
		<style type="text/css">
			div {
				background: red;
				display: inline;
				width: 200px;
				height: 80px;
		</style>
	</head>
	<body>
		<div>我要自学网</div>
		<span>我要自学网</span>
	</body>

1.2. 水平居中

1.2.1. 行级元素

（1）首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		text-align: center;
	}
</style>
<div id="father">
	<span id="son">我是行内元素</span>
</div>

（2）如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

<style>
	#father {
		display: block;
		width: 500px;
		height: 300px;
		background-color: skyblue;
		text-align: center;
	}
</style>
<span id="father">
    <span id="son">我是行内元素</span>
</span>

（3）效果
在这里插入图片描述

1.2.2. 块级元素

1.2.2.1. 方案一(分宽度定不定两种情况)

（1）定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
		margin: 0 auto;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

（2）不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 **display: inline;**即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

	<style>
			#father {
				width: 500px;
				height: 300px;
				background-color: skyblue;
				text-align: center;
			}
			#son {
				background-color: green;
				display: inline;
			}
		</style>
		<div id="father">
			<div id="son">我是块级元素</div>
		</div>

效果：（将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用）
在这里插入图片描述

1.2.2.2. 方案二(使用定位属性)

首先设置父元素为相对定位，再设置子元素为绝对定位，子元素设置为left:50%或设置为transform: translateX(-50%);使子元素的左上角水平居中；
（1）定宽度：设置绝对子元素的margin-left: -元素宽度的一半px;或者设置transform: translateX(-50%);

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
		position: absolute;
		left: 50%;
		margin-left: -50px;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

（2）不定宽度：利用css3新增属性transform: translateX(-50%);

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		height: 100px;
		background-color: green;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.2.2.3. 方案三：使用flexbox布局实现

使用flexbox布局（宽度定不定都可以），只需要给待处理的块状元素的父元素添加属性display: flex; justify-content: center;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		display: flex;
		justify-content: center;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.3. 垂直居中

1.3.1. 行内元素

1.3.1.1. 单行的行内元素

（1）只需要设置单行行内元素的"行高等于盒子的高" line-height: 300px;即可；

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
	}
	#son {
		background-color: green;
		line-height: 300px;
	}
</style>
<div id="father">
	<span id="son">我是单行的行内元素</span>
</div>

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

1.3.1.2. 多行的行内元素

使用给父元素设置**display:table-cell;和vertical-align: middle;**属即可；

 <style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		display: table-cell;
		vertical-align: middle;
	}
	#son {
		background-color: green;
	}
</style>
		<div id="father">
		<span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

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

1.3.2. 块级元素

1.3.1.1. 方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；
（1）定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		height: 100px;
		background-color: green;
		position: absolute;
		top: 50%;
		margin-top: -50px;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

（2）不定高度：利用css3新增属性transform: translateY(-50%);

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		width: 100px;
		background-color: green;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.3.1.2. 方案二：使用flexbox布局实现

使用flexbox布局（高度定不定都可以），只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		display: flex;
		align-items: center;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.3.1.3. 其他方式

display的table和table-cell一般情况下用的不多，但关于让块级元素的多行文字垂直居中，行级元素单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。这里介绍display：table和table-cell是如何让多行文字垂直居中。

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		display: table;
	}
	#son {
		display: table-cell;
		vertical-align: middle;
		background-color: green;
	}
</style>
<div id="father">
	<div id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元
		素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</div>
</div>;

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

只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中。

1.4. 水平垂直居中

1.4.1. 已知高度和宽度的元素

1.4.1.1. 方案一：设置父元素相对定位、子元素绝对定位

设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.4.1.2. 方案二：设置父元素为相对定位，给子元素设置绝对定位，

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		width: 100px;
		height: 100px;
		background-color: green;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -50px;
		margin-top: -50px;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.4.2. 未知高度和宽度的元素

1.4.2.1. 方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);或transform: translate(-50%, -50%);

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		position: relative;
	}
	#son {
		background-color: green;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.4.2.2. 方案二：使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

<style>
	#father {
		width: 500px;
		height: 300px;
		background-color: skyblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#son {
		background-color: green;
	}
</style>
<div id="father">
	<div id="son">我是块级元素</div>
</div>

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

1.5. CSS display:flex 属性

1.5.1. display:flex 布局

display:flex 是一种布局方式。它既可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.5.2. flex的六个属性

1.5.2.1. flex-direction

容器内元素的排列方向(默认横向排列)
（1）flex-direction:row; 沿水平主轴让元素从左向右排列。
在这里插入图片描述

（2）flex-direction:column; 让元素沿垂直主轴从上到下垂直排列。
在这里插入图片描述

（3）flex-direction:row-reverse;沿水平主轴让元素从右向左排列
在这里插入图片描述

1.5.2.2. flex-wrap

容器内元素的换行(默认不换行)
（1）flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%设置此属性，2个div宽度就自动变成各50%；
（2）flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；

1.5.2.3. justify-content

元素在主轴（页面）上的排列
（1）justify-content : center;元素在主轴（页面）上居中排列。
在这里插入图片描述

（2）justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列。
在这里插入图片描述

（3）justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列。
在这里插入图片描述

（4）justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
在这里插入图片描述

（5）justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
在这里插入图片描述

1.5.2.4. align-items

元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
（1）align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
在这里插入图片描述
（2）align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

（3）align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

（4）align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）

1.5.2.5. align-content

在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

<style>
	#main {
		width: 70px;
		height: 300px;
		border: 1px solid #c3c3c3;
		display: -webkit-flex;
		display: flex;
		background: red;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: flex-start;
	}
	#main div {
		width: 70px;
		height: 70px;
	}
</style>
<div id="main">
	<div style="background-color:coral;">div1</div>
	<div style="background-color:lightblue;">div2</div>
	<div style="background-color:pink;">div3</div>
</div>

（1）align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
在这里插入图片描述
（2）align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。

（3）align-content: center; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

（4）align-content: stretch; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。
在这里插入图片描述
（5）align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。

（6）align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。
在这里插入图片描述

1.5.3. justify-content

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  
/* 均匀排列每个元每个元素之间的间隔相等 */
justify-content: stretch;       
/* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit; /* 从父元素继承该属性 */
justify-content: initial; /* 设置该属性为它的默认值 */
justify-content: unset;

1.5.4. align-items

（1）stretch 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-（2）width/height’属性的限制。测试 »
（3）center 元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。测试 »
（4）flex-start 元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。测试 »
（5）flex-end 元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。测试 »
（6）baseline 元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。测试 »
（7）initial 设置该属性为它的默认值。请参阅 initial。
测试 »
（8）inherit 从父元素继承该属性。。