水平居中和垂直居中

抹茶生活

已于 2023-07-16 17:54:25 修改

阅读量76

点赞数

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

于 2023-03-20 14:12:28 首次发布

本文链接：https://blog.csdn.net/ylycrp/article/details/129664884

版权

前端web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

水平居中

inline元素：文字、行内元素、行内块元素水平居中都可以给父元素设置text-aligh:center;
block元素（块级元素）：水平居中（给该元素设置）：margin:0 auto;
absolute元素：left:50%+margin-left负值（自身宽度的一半）

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
/*清除样式*/
*{
	margin: 0;
    padding: 0;
	}
.box1{
height:400px;
width:400px;
background-color:orange;
/*想要文字、行内元素、行内块元素水平居中就给父元素添加以下代码*/
text-align:center;

}
span{

background-color:aqua;
}
.box2{
	height: 100px;
	width: 100px;
	background-color: aquamarine;
/*想要块元素水平居中就给该元素添加以下代码*/
    margin:0 auto;
}

</style>
</head>
<body>
<div class="box1">
我是文字
<br>
<span>我是行内元素</span>
<br>
<img width=50px height=50px src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=173&h=108&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2">
<br>
<div class="box2"> 我是块元素</div>
</div>
</body>
</html>

垂直居中

文字、行内元素、行内块元素垂直居中都可以给父元素设置line-height=height; （当布局中既有文字又有图像时给子元素设置vertical-align:middle，进行垂直对齐）
块级元素垂直居中：方法一：子元素设置margin-top, 值 =（父元素高度-子元素高度) / 2，并~~且给父元素加上overflow:hidden; (块级元素垂直居中还涉及到一个外边距重叠的问题)~~
方法二：将父元素变成表格样式后设置：vertical-align:middle;
absolute: top:50%+margin-top:负值（自身高度一半）

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
/*清除样式*/
*{
	margin: 0;
    padding: 0;
	}
.box1{
height:400px;
width:400px;
background-color:orange;
/*想要文字、行内元素、行内块元素垂直居中就给父元素添加以下代码*/

line-height: 400px;

}
span{
height:100px;
width:100px;
background-color:aqua;
vertical-align: middle;
}
img{
	width:250px;
	height:150px;
	 vertical-align: middle;
}
.outer{
		width: 400px;
		height:400px;
		background-color: gray;
		/* 设置overflow:hidden解决外边距重叠问题 */
		overflow: hidden; 
				
		}
.inner{
		width: 200px;
	    height:100px;
		background-color: yellow;
		/* 让块元素水平居中 margin: 0 auto*/
		/* margin: 150px auto 0 auto; */
		margin-top: 150px;
		/* margin-top: 150px; */
		/* 让里面的文字水平居中 */
		text-align: center;
		/* 让里面的文字垂直居中 */
		line-height: 100px;
		
		}
</style>
</head>
<body>
<div class="box1">

<span>我是行内元素</span>
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=173&h=108&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2">
<br>
<div class="outer">
			<div class="inner"><span>inner</span></div>
		</div>
</div>
</body>
</html>

行内元素和行内块元素垂直居中效果

块级元素垂直居中效果

将父元素变成表格样式在设置vertical-algn:middle;

  .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /*垂直方向上*/
            vertical-align: middle; /*将元素居中*/
            display: table-cell;/*变成表格样式*/
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin: 0 auto;/*水平居中*/
        }
<div class="box1">
    <div class="box2"></div>
</div>

块级元素居中（包括水平方向和垂直方向）

给子元素开启绝对定位，给父元素开启相对定位，开启了之后也有两种写法

top:0; bottom:0; left:0; right:0; margin:auto;
top:50%; left:50%; margin-top:-绝对定位元素高度值/2; margin-left:-绝对定位元素高度值/2;

注意事项：方法二子元素必须设置宽和高否则以上代码无效。

利用flex 伸缩盒模型进行垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素水平垂直居中</title>
		<style type="text/css">
			.outer{
				width: 400px;
				height: 400px;
				background-color: #888;
				display: flex;
				
				/* 方案一: 在父元素里面添加*/
				/* justify-content: center; */
				/* align-items: center; */
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: orange;
				/* 方案二：直接在子元素里面添加margin:auto; */
				margin: auto;
				
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner">
			</div>
		</div>
	</body>
</html>

拓展知识点一：哪些是行内元素，哪些是块元素，哪些是行内块元素？

拓展知识点二：vertical-align是干嘛用的，为什么vertical-align可以达到垂直居中效果？

多个元素既有文字又有图像一起的时候,每个子元素用vertical-align:middle进行对齐。

拓展知识点三：overflow是干嘛用的，为什么overflow可以达到垂直居中效果？

拓展知识点四：什么是外边距重叠？有什么解决的办法？
margin模式塌陷（外边距重叠）：
表现在1：第一个子元素加margin-top会被父元素吃掉，给最后一个孩子加margin-bottom会被父元素吃掉（第一个孩子的上外边距和第二个孩子的下外边距会跟父元素重叠）。
解决方案：1. 给父元素加一个border边框;
2. 给父元素加上padding;
3. 加上overflow:hidden；