html如何把元素都放到页面居中,四种方法让块元素在网页中绝对居中

在一些页面中需要让一个块元素绝对居中，例如，一个跳转页中的提示信息框就需要让其中页面的正中位置显示提示信息，那么如何让一个块元素在页面中绝对居中呢?下面我列出4种解决方法：

1.利用table中内容在单元格中默认垂直居中的特性。

块元素绝对居中

html,body,table{

margin:0;

height:100%;

}

table{

width:100%;

}

#box{

width:300px;

height:300px;

background:teal;

margin:auto;

}

2.利用css3中的transform属性

块元素绝对居中

*{

margin:0;

}

#box{

width:300px;

height:300px;

background:maroon;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

3.利用margin属性

块元素绝对居中

*{

margin:0;

}

#box{

width:300px;

height:300px;

background:silver;

position:absolute;

left:50%;

top:50%;

margin-left:-150px;

margin-top:-150px;

}

4.利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto;

块元素绝对居中

*{

margin:0;

}

#box{

width:300px;

height:300px;

background:pink;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}