2024年前端面试硬核之垂直居中的四种方法_前端面试垂直居中(1)，2024年最新前端非技术面试

2401_84433807

于 2024-05-14 03:54:49 发布

阅读量272

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84433807/article/details/138830689

版权

程序员专栏收录该内容

177 篇文章 1 订阅

订阅专栏

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
#container{
width: 500px;
height: 400px;
border: 2px solid black;
position: relative;
}
#inner{
width: 200px;
height: 100px;
background-color: yellowgreen;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; /*width的一半*/
margin-top: -50px; /*height的一半*/
} 
</style>
<title></title>
	</head>
	<body>
	<div id="container">
		<div id="inner">
	</div>
	</body>
</html>

inner居中，则margin-left 和margin-top与width和height（inner）的取负值的二分之一。

3.table-cell（未脱离文档流的）

设置父元素的display:table-cell,和vertical-align:middle，这样子元素可以实现垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
div{
width: 100px;
height: 100px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 10px;
height: 10px;
vertical-align: middle;
}
		</style>
		<title></title>
	</head>
	<body>
	<div>
		<img src="Android.jpg" />
	</div>
	</body>
</html>

4.flex布局

将父元素设置为display：flex，并且设置align-items:center;justify-content:center;
用上面的html架子：

div{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: flex;
align-items: center;
justify-content: center;
}
img{
width: 20px;
height: 20px;
border: 3px solid #458761;
padding: 1px;
}