Fe-interview: [css] 第93天 写出div在不固定高度的情况下水平垂直居中的方法？
第93天 写出div在不固定高度的情况下水平垂直居中的方法？
haizhilin2013
All 12 comments
我知道的有两种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* flex居中 */
.tith1 {
display: flex;
justify-content: center;
align-items: center;
background: red;
}
/* table居中 */
.tith2 {
text-align: center;
width: 100%;
display: table;
background: blue;
}
.tith2 > span {
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<p class="tith1">
<span>123</span>
</p>
<p class="tith2">
<span>123</span>
</p>
</body>
</html>
huangsw0411
on 18 Jul 2019
父盒子相对定位
子盒子绝对定位:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
父盒子相对定位，子盒子绝对定位和margin
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
KongXiaoYan03
on 18 Jul 2019
自从用了弹性布局，我的居中对齐只有弹性布局。
<style>.box{css: display:flex;flex-flow: row nowarp;justify-content: center; align-items: center;}</style>
<div class="box"><div></div></div>
NicholasBaiYa
on 18 Jul 2019
不知道以后flex布局普及后，老的布局方式还有多大的用武之地
shejiJiang
on 18 Jul 2019
大家都很棒 我这里有一种新的方法
.child{
width: 100px;
height: 100px;
background-color: #f60;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
HuoXiaoYe
on 18 Jul 2019
<div class="box">
<div>一小块</div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
background-color: #11b0ff;
}
/* flex */
.box{
display: flex;
justify-content: center;
align-items: center;
}
/* 行内块属性 */
/* .box{
text-align: center;
}
.box::after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box div{
vertical-align: middle;
display: inline-block;
} */
/* 表格 */
/* .box{
display: table;
text-align: center;
}
.box div{
display: table-cell;
vertical-align: middle;
} */
/* 定位 */
/* 可以达到效果,但是无法撑满.box */
/* .box{
position: relative;
}
.box div{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
} */
</style>
tonyChenHey
on 18 Jul 2019
<template>
<div class="father">
<div class="son">
11111111111 <br>
11111111111 <br>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
/* 第一种 flex */
.father {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
background-color: #ccc;
}
/* 第二种 transform+absolute */
.father {
height: 100vh;
position: relative;
}
.son {
width: 100px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
nowherebutup
on 18 Jul 2019
- 利用
flex布局：
.father{
display: flex;
justify-content: center;
align-items: center;
}
2: 利用transform属性进行位移：
.father{
position: relative;
}
.children{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
xxf1996
on 18 Jul 2019
父盒子相对定位
子盒子绝对定位:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);父盒子相对定位，子盒子绝对定位和margin
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
第二种子元素需要有固定高宽
Vi-jay
on 1 Aug 2019
1，flex
2，absolute
3，table
jiamianmao
on 13 Aug 2019
- 外层
relative，div使用absolute配合transform实现。 - 外层
relative，div使用absolute设置left/right/top/bottom为 0 配合margin: auto实现。 flex实现。table-cell实现。
CodePen 地址：https://codepen.io/Konata9/pen/OJLbMyv?editors=1100
Konata9
on 21 Aug 2019
万能定位：position各个坐标全部为0，margin: 0 auto
1018715564
on 14 Nov 2019
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
Most helpful comment
自从用了弹性布局，我的居中对齐只有弹性布局。
<style>.box{css: display:flex;flex-flow: row nowarp;justify-content: center; align-items: center;}</style><div class="box"><div></div></div>