如何实现垂直居中
2022-06-07 本文已影响0人
李先来贰
如果父元素没有设置height
- 那么只需要设置将parent部分设置padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<style>
.parent {
padding: 30px;
border: 1px solid green;
}
.child {
background: red;
border: 1px solid blue;
width: 100px;
height: 100px;
padding: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
如果把父元素的height写死了
用div模拟table
父级元素
- 用
display:table-cell - 用
vertical-align:middle - 用
text-align:center让子级的行内元素居中
子级元素
display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Div模拟table</title>
<style>
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
border: 1px solid red;
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
margin:auto和设置偏移
-
父级设置
position:relative -
子级设置
positon:absolute-
top/right/left/bottom全部设置为0，如果子级没有设计宽高，子级会占满整个父级。因为这四个位置，是相对于父级而设置的 -
然后设置宽高，子级会按照我们的设置来显示。但子级的虚拟占位，依然是撑满了了整个父级
-
然后
margin:auto，它就会上下左右都居中了
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用margin-top</title>
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
margin: auto;
}
.son {
position: absolute;
border: 1px solid green;
width: 100px;
height: 100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
根据父级元素设置负margin
-
父级元素相对定位
-
子级元素绝对定位
-
设置
top/left -
然后设置
marin-left和margin-top- 负的具体px
- 负的比例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<style>
.parent {
height: 600px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid green;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px; // 这里可改为-50%
height: 100px;
margin-top: -50px;// 这里根据height上调
}
</style>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</body>
</html>
使用transform:translate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
.parent {
height: 600px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</body>
</html>
使用flex布局
-
父级元素
display:flexjustify-content:centeralign-items:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
.parent {
height: 600px;
border: 1px solid red;
/* position: relative; */
display:flex;
align-items:center;
justify-content:center;
}
.child {
border: 1px solid green;
position: absolute;
width:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</body>
</html>
使用grid
-
父级用
display:grid -
子级
align-self:centerjustify-self:center
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<style>
.parent {
height: 600px;
border: 1px solid red;
display: grid;
}
.child {
border: 1px solid green;
width:100px;
align-self:center;
justify-self:center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</body>
</html>
