共计 684 个字符,预计需要花费 2 分钟才能阅读完成。
1、元素上下垂直居中的方式有哪些?
元素水平垂直居中的方式有哪些?
absolute 加 margin 方案
fixed 加 margin 方案
display:table 方案
行内元素 line-height 方案
flex 弹性布局方案
transform 未知元素宽高解决方案
absolute 加 margin 方案
div{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%:
margin-top: -50px;
margin-left: -50px;
}
fixed 加 margin 方案
div{
position: fixed;
width: 100px;
height: 100px;
top: 0;
right:0;
left: 0;
bottom: 0;
margin: auto;
}
display:table 方案
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
}
行内元素 line-height 方案
div{
text-align: center;
line-height: 100px;
}
flex 弹性布局方案
div{
display: flex;
align-items: center;
justify-content:center
}
transform 未知元素宽高解决方案
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
2、var let const 的区别及使用场景?