以以上代碼為例：

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負值為子元素寬高一半來實現(xiàn)

.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;

}

總結(jié)

以上是生活随笔為你收集整理的浮层java_css保持浮层水平垂直居中的四种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。