css
1.如何将一个div盒子水平垂直都居中?
(1)采用定位
<div class="parent">
<div class="child"></div>
</div>
.parent{
position: relative;
background-color: pink;
width: 500px;
height: 500px;
}
.child{
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/*margin-left: -50px;*/
/*margin-top: -50px;*/
transform: translate(-50%,-50%);
}
(2)利用margin:auto
.parent{
position: relative;
background-color: pink;
width: 500px;
height: 500px;
}
.child{
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(3)利用弹性布局
.parent{
position: relative;
background-color: pink;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.child{
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}
2.flex:1是什么意思?
flex是flex-shrink,flex-basis,flex-grow的缩写
flex:1表示让所有弹性盒模型对象的子元素都有相同的长度,且忽略内容。
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<style>
.parent{
display: flex;
height: 200px;
}
.child1{
background-color: lightblue<