php中div居中css,css中div垂直居中的方法。

利用绝对定位实现的居中

代码如下：

居中

*{

padding: 0px;

margin: 0px;

}

body {

height: 100%;

overflow: hidden;

}

.father{

position: absolute;

height: 500px;

width: 100%;

background-color:#2AABD2;

}

.children{

position: absolute;

top: 50%;

left: 50%;

background-color: red;

width: 100px;

height: 100px;

margin: -50px 0 0 -50px;

}

效果图如下：

利用flex垂直居中

居中

*{

padding: 0px;

margin: 0px;

}

body {

height: 100%;

overflow: hidden;

}

.father{

height: 500px;

width: 100%;

background-color:#2AABD2;

display: flex;

justify-content: center;/*实现水平居中*/

align-items:center; /*实现垂直居中*/

}

.children{

background-color: red;

width: 100px;

height: 100px;

}

效果图如下：

transform+relative实现的居中

居中

*{

padding: 0px;

margin: 0px;

}

body {

height: 100%;

overflow: hidden;

}

.father{

position: absolute;

height: 500px;

width: 100%;

background-color:#2AABD2;

}

.children

{

width: 300px;

height: 150px;

background-color: #333333;

position: relative;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

效果图如下：

多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^)，嘛其实网上实现居中的方式确实很多，互相探讨加深印象。