一、方法
- 使用position和margin
- 使用flex布局
- 把内部元素变成行内元素
- 使用 transform
- 使用position和margin，另一种方式
- 使用table-cell
- flex和margin配合使用
二、代码演示
可以直接复制到本地进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: #007fff;
margin: 10px;
}
.inner {
width: 150px;
height: 100px;
background-color: #42b983;
}
/* 方法一：使用定位 */
.box1 {
position: relative;
}
.inner1 {
position: absolute;
/*知道父元素的宽高*/
top: 100px;
left: 150px;
/*知道子元素的宽高*/
margin-top: -50px;
margin-left: -75px;
}
/* 方法二：使用 flex 布局 */
.box2 {
display: flex;
justify-content: center;
align-items: center;
}
.inner2 {
}
/* 方法三：把内部元素变成行内元素 */
.box3 {
text-align: center;
}
.inner3 {
display: inline-block;
margin-top: 50px;
}
/* 如果面试官问：父元素和子元素的宽高都不确定怎么办？ */
/* 方法四：使用 transform */
.box4 {
position: relative;
}
.inner4 {
position: absolute;
top: 50%;
left: 50%;
/*设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/
transform: translate(-50%, -50%);
}
/*方法五*/
.box5 {
position: relative;
}
.inner5 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 方法六 */
.box6 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner6 {
display: inline-block;
}
/* 方法七 */
.box7 {
display: flex;
}
.inner7 {
margin: auto;
}
</style>
</head>
<body>
<div class="box box1">
<div class="inner inner1">方法1</div>
</div>
<div class="box box2">
<div class="inner inner2">方法2</div>
</div>
<div class="box box3">
<div class="inner inner3">方法3</div>
</div>
<div class="box box4">
<div class="inner inner4">方法4</div>
</div>
<div class="box box5">
<div class="inner inner5">方法5</div>
</div>
<div class="box box6">
<div class="inner inner6">方法6</div>
</div>
<div class="box box7">
<div class="inner inner7">方法7</div>
</div>
</body>
</html>
三、资料
注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。
display:table和display:table-cell实现单行，多行文本垂直居中
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入