子div在父div的垂直居中问题
2018-10-15 本文已影响0人
前端葱叶
呵~我又来整理笔记了,废话不多说,上代码!
如何实现子div在父div垂直居中的效果呢?(类似下图的效果)
这里有两种方案:
1.父:
writing-mode:vertical-lr;
子:
margin:auto;
2.父:
position:relative;
子:
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
方案一:
父:
writing-mode:vertical-lr;
子:margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子div在父div的居中问题</title>
<style>
/* 方案一 */
.father{
width: 400px;
height: 400px;
background: red;
writing-mode: vertical-lr;
}
.child{
width: 100px;
height: 50px;
background: purple;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
方案二:
父:
position:relative;
子:position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子div在父div的居中问题</title>
<style>
/* 方案二 */
.father {
width: 400px;
height: 400px;
background: red;
position: relative;
}
.child {
width: 100px;
height: 50px;
background: purple;
/* 以下几步很重要! */
margin: auto;
position: absolute;
top: 0;
/*把right:0加上就是垂直水平居中*/
/* right: 0;*/
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
附:
把right:0
加上是垂直居中的最后效果:
推荐一篇文章:
CSS实现水平垂直居中的1010种方式