前言
昨天收到京东的面试邀请,面试官是个小姐姐,第一道就是css问题,父元素高度不固定的情况下,如何让内部块元素垂直居中,当时紧张只想到第三种方法,结合网上资料整理了其他几种方法,以供后续翻看,供大家参考!
正文
第一种
- 在父元素添加
display:flex;align-items:center
- 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素居中</title>
</head>
<style>
.outer{
background:#fc4964;
height:500px;
display:flex;
align-items: center;
}
.inner{
background:#fff;
}
</style>
<body>
<div class='outer'>
<div class='inner'>1111</div>
</div>
</body>
</html>
- 结果图:
第二种
- 将父元素的position设置为
position:relative
,内部块元素设置为position:absolute;top:50%;
并且margin-top向上移动元素的一半 - 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
<style>
.outer{
background:#fc4964;
height:500px;
position:relative;
}
.inner{
background:#fff;
width:100px;
height:50px;
position:absolute;
top:50%;
margin-top:-25px
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
- 效果图:
第三种
- 设置内部块元素为
position:relative;top:50%;transform:translateY(-50%)
- 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
<style>
.outer{
background:#fc4964;
height:500px;
}
.inner{
background:#fff;
width:100px;
height:50px;
position:relative;
top:50%;
transform:translateY(-50%)
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
- 结果如下:
第四种
- 类似第一种方法,设置父元素的
display:flex;
,然后设置子元素align-self: center;
- 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
<style>
.outer{
background:#fc4964;
height:500px;
display:flex;
}
.inner{
background:#fff;
width:100px;
height:50px;
align-self: center;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
- 效果图已省略…
第五种
- 设置父元素
display:table-cell; vertical-align: middle;
- 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
</head>
<style>
.outer{
background:#fc4964;
width:600px;
height:500px;
display:table-cell;
vertical-align: middle;
}
.inner{
background:#fff;
width:100px;
height:50px;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
- 效果如下:
总结
结合网上资料,整理了这一篇文章,后续有新方法再整理出来,码字不易,请多支持