1.水平居中：行内元素(inline或者inline-*类型元素)
使用text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
text-align: center;
border: 1px solid #0a1015;
}
</style>
<body>
<div>
<span>链接元素01<span>
</div>
</body>
</html>
2. 水平居中：块状元素
我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*
注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度
*/
div{
width: 200px; /* 这里需要设置元素宽度 */
height: 150px;
background: #222;
color: #FFF;
margin: 10px auto;
}
</style>
<body>
<div class="center">
水平居中的块状元素
</div>
</body>
</html>
3.水平居中：多个块状元素
如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*
注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度
*/
body{
text-align:center;
}
/* 元素美化 */
div{
width: 100px;
background: #222;
height: 50px;
color: #FFF;
padding: 10px;
display:inline-block;
}
</style>
<body>
<div class="center">
水平居中的块状元素
</div>
<div class="center">
水平居中的块状元素
</div>
</body>
4.水平居中：多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*
注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度
*/
body{
display: flex;
justify-content: center;
}
/* 页面美化元素 */
div{
width: 100px;
background: #222;
height: 50px;
color: #FFF;
padding: 10px;
margin: 10px;
}
</style>
<body>
<div class="center">
水平居中的块状元素
</div>
<div class="center">
水平居中的块状元素
</div>
</body>
</html>
5. 垂直居中：单行的行内元素
可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
background: #222;
height: 200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
height: 200px;
line-height:200px;
color: #FFF;
}
</style>
<body>
<div id="container">
<a href="#">hello, gbtags.com</a>
</div>
</body>
</html>
6.垂直居中：多行的行内元素
组合使用display:table-cell和vertical-align:middle(vertical-align 属性设置元素的垂直对齐方式)属性来定义需要居中的元素的父容器元素生成效果
7. 垂直居中：已知高度的块状元素
将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 100px;
height: 100px;
background: #222
}
/* 以下为居中代码 */
.item{
top: 50%;
margin-top: -50px;
position: absolute;
padding:0;
}
</style>
<body>
<div class="item">
</div>
</div>
</body>
</html>
8.垂直居中：未知高度的块状元素
对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 150px;
background: #222;
color: #FFF;
}
/* 元素垂直居中代码 */
.item{
top: 50%;
position: absolute;
transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
</style>
<body>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
</div>
</body>
</html>
9. 水平垂直居中：已知高度和宽度的元素
将设置元素绝对定位，并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 150px;
height: 150px;
background: #222;
color: #FFF;
}
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
</style>
<body>
<div class="item">
</div>
</body>
</html>
10.水平垂直居中：未知高度和宽度元素
将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
background: #222;
color: #FFF;
}
/* 以下代码保证元素在水平和垂直方向上绝对居中 */
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
</div>
</body>
</html>
11.水平垂直居中：使用flex布局实现
设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.item{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}
</style>
<body>
<div class="parent">
<div class="item"></div>
</div>
</body>
</html>