只要使得父元素相对定位，子元素绝对定位，子元素的top和left都为50%，margin-top和margin-left分别为宽高的负一半即可。
<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV上下左右居中</title>
<style type="text/css">
*{/*实现div的上下左右居中*/
margin: 0;
padding: 0;
}/*清除格式*/
.div0{
height: 1000px;
width: 800px;
position: relative;/*父元素相对定位*/
background: #678680;
}
.div1{
position: absolute;/*子元素绝对定位*/
height: 240px;
width: 300px;
/*overflow: hidden;*//*可使得多出块元素的文本隐藏*/
top: 50%;
left: 50%;
margin-top: -120px;/*高的一半*/
margin-left: -150px;/*宽的一半*/
border: 5px solid #E58B8B;
text-align: center;
}
.div1 p{
font-size: 36px;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
<p>hello world!</p>
<p>hello world!</p>
</div>
</div>
</body>
</html>
<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下左右居中</title>
<style type="text/css">
*{/*实现div的上下左右居中*/
margin: 0;
padding: 0;
}/*清除格式*/
.div0{
height: 500px;
width: 500px;
position: relative;/*父元素相对定位*/
background: #678680;
}
.div1{/*被居中元素宽高未知*/
position: absolute;/*子元素绝对定位*/
top: 100px;
bottom: 100px;
left: 200px;
right: 200px;/*设置上下左右撑开以居中*/
background: #E3A5A5;
text-align: center;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
</div>
</div>
</body>
</html>
![微信客服](javascript: Mobi.showWeChatService("//11465155.s21i.faiusr.com/4/ABUIABAEGAAgkru0-QUozOStogYw4wE45AE.png",{"tips":"请使用微信扫一扫"});){kind=link}