Document
/\* 行内元素居中 \*/
.div1 {
width: 500px;
height: 300px;
background-color: #056;
/\* 行内元素水平居中 行内元素的父元素：text-aling \*/
text-align: center;
/\* 行内元素垂直居中 行内元素的父元素height和line-height设置同样的值 \*/
line-height: 300px;
}
/\* 块元素居中 \*/
.div2 {
width: 800px;
height: 500px;
margin-top: 50px;
background-color: #0f0;
position: relative;
/\* display: table-cell;
vertical-align: middle; \*/
}
/\* 水平居中方式1 子元素设置宽高，然后margin： X auto \*/
/\* .child {
width: 100px;
height: 100px;
margin: 0 auto;
} \*/
/\* 水平居中方式2 父元素给相对定位 子元素绝对定位position: absolute;left: 50%;transform: translateX(-50%); \*/
/\* .child{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
transform: translateX(-50%);
} \*/
/\* 块元素垂直居中 \*/
/\* .child{
width: 100px;
height: 100px;
background-color: rgb(163, 76, 76);
line-height: 100px;
} \*/
.child{
width: 100px;
height: 100px;
background-color: rgb(163, 76, 76);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
123
