1. 水平居中margin 0 auto , 转化为init-block
2. 垂直居中：
单行文本设置行高
转化为表格 [设置水平、垂直居中]
使用transform [设置水平、垂直居中]
3. 水平垂直居中【有宽、高盒子】： 使用 绝对布局、 margin
1. 有宽度、高度的盒子 水平 居中 margin:0 auto
2. 没有宽度的盒子 水平居中 转化为init-block使用[text-align: center;]解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 500px;
height: 300px;
background-color: pink;
text-align: center;
}
.content{
border: solid 1px #FF0000;
display: inline-block;
/* 去掉div的默认宽度100%，让撑开盒子
*/
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<a href="#">百度</a>
<a href="#">淘宝</a>
<a href="#">新浪</a>
</div>
</div>
</body>
</html>效果图：
3. 垂直居中
3.1. 如何当行文本， 设置 行高 等于盒子 高度
3.2. 沿用表格垂直居中原理， 水平垂直居中
一号盒子 转化为表格
二号盒子 转化为单元格，设置单元格垂直居中， tr
三把 td 转化为 inline-block 设置内容text-align: center; td
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
width: 500px;
height: 300px;
background-color: pink;
text-align: center;
display: table;
}
.son{
/**
* 转化为tr, 通过表格属性vertical-align: middle;
* 设置垂直 居中单元 格
*/
display: table-cell;
vertical-align: middle;
}
.content{
/**
* 设置水平居中
*/
border: 1px solid #000000;
display:inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="content">
这是文本
<br> 这是文本2
<br> 这是文本3
</div>
</div>
</div>
</body>
</html>效果图：
适配IE6上面的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有宽度高度的盒子水平垂直居中</title>
<style>
.box{
width: 500px;
height: 500px;
background: pink;
margin:100px auto;
background-color: #0f0;
display:table;/*转换为表格*/
/* ie6兼容 */
_position: relative;
}
/*
不明白看笔记
vertical-align: middle; //垂直居中
text-align: center; //水平居中
*/
.son{
display:table-cell;/*转换为单元格*/
vertical-align: middle;
text-align: center;
background-color: #f00;
/* ie6兼容 */
_position: absolute;
_left:50%;
_top:50%;
}
.content{
background-color: #0f0;
border:1px solid #f00;
display: inline-block;
/*ie6兼容*/
_position: relative;
_left:-50%;
_top:-50%;
_display:inline;
}
</style>
</head>
<body>
<div class="box">
<div class="son">
<div class="content">
文这是文这是文这是文这是文这是文这是文这是文
</div>
</div>
</div>
</body>
</html>去掉 diplay属性版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没有宽度高度的盒子水平垂直居中</title>
<style>
.box{
width: 500px;
height: 500px;
background: pink;
margin:100px auto;
background-color: #0f0;
/* ie6兼容 */
position: relative;
}
.son{
text-align: center;
background-color: #f00;
/* ie6兼容 */
position: absolute;
left:50%;
top:50%;
}
.content{
background-color: #0f0;
border:1px solid #f00;
/*ie6兼容*/
position: relative;
left:-50%;
top:-50%;
display:inline;
}
</style>
</head>
<body>
<div class="box">
<div class="son">
<div class="content">
文这是文这是文这是文这是
</div>
</div>
</div>
</body>
</html>3.3. 解决方式3 没有高度的盒子里面内容 水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
border: 1px solid #FF0000;
position: relative;
}
.content2{
background-color: #BBFFAA;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="father">
<div class="content2">
AAAAAAAA
<br />
BBBBBBBBBB
</div>
</div>
</body>
</html> 
4. div中div(有高度如何居中) ， 内部div 有确定的高度和宽度如何水平垂直居中
方案1： 使用绝对定位
/** 居中方案1, div中div(有高度如何居中) */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/** 居中方案1, div中div(有高度如何居中) */
.father{
width: 100%;
height: 300px;
border: solid 1px #FF0000;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: #BBFFAA;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/**
* 设置文本内容水平、垂直居中
*/
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="content">KKK</div>
</div>
</body>
</html>方案2: 定义margin
扫描二维码关注公众号，回复：
12683626 查看本文章
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
border: 1px solid #FF0000;
position: relative;
}
.content2{
width: 200px;
height: 200px;
background-color: #BBFFAA;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
text-align: center;
line-height: 200px;
box-sizing: border-box;
padding: 50px;
}
</style>
</head>
<body>
<div id="father">
<div class="content2"></div>
</div>
</body>
</html>方案3： 使用 transform: translate(-50%,-50%);
效果图：
