一、宽度高度都确定如何在一个div中居中
这个是很常见的但方法有很多，我们先上html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
如图的样式
让绿色的div在红色的div中水平垂直居中的方法很多，下面列出一些
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法一：让父盒子相对定位也可以绝对定位，子元素绝对定位position: absolute;top:50%;left:50%;水平和垂直偏移量自身宽度和高度的一半.这是最普通的一种方法。
方法二：让父盒子相对定位也可以绝对定位，子元素绝对定位position: absolute;top:50%;left:50%;用css3的样式transform:translate(-50%,-50%)。
二、宽度确定高度不定如何在一个div中水平垂直居中
先上html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
position: relative;
}
.text{
width: 100px;
}
</style>
</head>
<body>
<div class="box1">
<p class="text">我都发我我的房间蜂窝肺我无法看而分为偶发我为我疯狂非我付款</p>
</div>
</body>
</html>
方法一:
.text{
width: 100px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
采用css3的样式transform方法
方法二：
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
line-height: 200px;
text-align: center;
}
.text{
width: 100px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
父盒子行高设为200px;子元素转化为行内元素然后加上vertical-align: middle;这是让他垂直居中，对于水平居中我们就采用让父盒子加上text-align: center;就ok了
方法三：
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
display: -webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
}
.text{
width: 100px;
line-height: 1;
}
使用 box-align 和 box-pack 属性，对 div 框的子元素进行居中：
目前没有浏览器支持 box-pack 属性。
Firefox 支持替代的 -moz-box-pack 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 属性。
所以使用需谨慎！！！
三、宽度高度都不确定如何在一个div中水平垂直居中
这种情况和宽度确定高度不定的方法一样，不过还有一种方法
转化为表格
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
display:table;
}
.text{
width: 100px;
line-height: 1;
display: table-cell;
vertical-align: middle;
}
然后子元素display: table-cell;
vertical-align: middle;
就ok了，就总结这么多，请各位大神多多批评指正，谢谢！！！