浮层java_css保持浮层水平垂直居中的四种方法
以以上代碼為例：
1，flex方法
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
2,利用絕對定位與transform
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
3,將父元素定位，子元素絕對定位，利用margin負值為子元素寬高一半來實現
.parent{
position: relative;
background-color: #eee;
height: 600px;
width: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
4利用定位與margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
總結
以上是生活随笔為你收集整理的浮层java_css保持浮层水平垂直居中的四种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 失信人员子女能考部队文职吗
- 下一篇： 坦克世界闪击战KV-13怎么样