水平居中
1. Text-align文字内容居中
实例：Demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#text{
color: white;
text-align: center;
background-color: blue;
}
</style>
</head>
<body>
<div id="text">
设置文字居中使用text-align: center;属性
</div>
</body>
</html>
效果图
2. Margin和width居中
整体居中使用margin属性，让左右的外边距自动，前提条件需要设置width属性。
要求：
- 设置居中的元素是区块元素（可以设置宽高）
- 设置居中的元素必须设置width属性
- 设置居中的元素必须设置左右外边距自动（margin:auto;或margin:0 auto;或margin-left:auto;margin-right:auto;）
实例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
margin-left: auto;
margin-right: auto;
width: 400px;
background-color: blueviolet;
}
header,footer,section{
text-align: center;
color: white;
}
</style>
</head>
<body>
<div id="content">
<header>头部<hr></header>
<section>内容，所以文字内容居中显示，并且整个模块整体居中。</section>
<section>整体居中的要求：</section>
<section>1.最外层元素是区块元素</section>
<section>2.最外层元素width属性</section>
<section>3.最外层元素设置margin:auto;</section>
<footer><hr>底部</footer>
</div>
</body>
</html>
效果图
3. Taxt-align和display居中
- 利用display:inline-block;让元素具有内联元素的特性，然后使用taxt-align让内联内容居中
- 内联元素可以是inline和inline-block
实例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: blueviolet;
text-align: center;
}
.menu{
display: inline-block;
padding: 5px 10px;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
4. 浮动元素居中
浮动的元素本身只有左右布局，不能居中，但是可以利用外层元素居中来实现
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: blueviolet;
width: 400px;
margin: auto;
height: 40px;
}
.menu{
float: left;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
5. 绝对定位和margin居中
绝对定位的元素可以通过left:50%将左上角移动到中间
然后使用margin-left:-200px（宽度的一半）整体左移宽度一半的距离
实例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: blueviolet;
width: 400px;
height: 160px;
position: absolute;
left: 50%;
margin-left: -200px;
}
.menu{
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
6. 使用div填充居中
在需要居中的元素左边填充一个空的div来使元素对齐
实例：demo06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
white-space: nowrap;
overflow: hidden;
}
#left{
display: inline-block;
height: 40px;
width: 50%;
}
.menu{
position: relative;
left: -200px;
background-color: #20B2AA;
display: inline-block;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div id="left"></div>
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
7. 绝对定位和width和margin：0 auto居中
绝对定位的时候，可以利用left:0和right:0和margin:0 auto自动水平居中，必须设置width。
实例：demo07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
position: relative;
}
.menu{
background-color: #20B2AA;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
</div>
</body>
</html>
8. CSS3的fit-content和margin居中
实例：demo08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #20B2AA;
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.menu{
display: inline-block;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
9. Display弹性盒子justify-content居中
Display:flex; Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。
实例：demo09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
display: flex;
justify-content: center;
}
.menu{
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
background-color: #008B8B;
align-self: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
10. 绝对定位和Transform居中
实例：demo10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
position: absolute;
background-color: #008B8B;
height: 40px;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
left: 50%;
}
.menu{
float: left;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<div class="menu">首页</div>
<div class="menu">新闻</div>
<div class="menu">动态</div>
<div class="menu">联系</div>
</div>
</body>
</html>
效果图
垂直居中
1. line-height文字居中
实例：demo11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
line-height: 100px;
}
</style>
</head>
<body>
<div id="content">
使用行高让文字居中
</div>
</body>
</html>
效果图
2. Display和vertical-align居中
实例：demo12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
width: 500px;
height: 100px;
display: table-cell;
vertical-align: middle;
}
.text{
background-color: red;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
3. Display和align-items居中
实例：demo13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
width: 500px;
height: 100px;
display: flex;
align-items: center;
}
.text{
background-color: red;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
4. Display和flex-wrap和align-content居中
实例：demo14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.text{
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
5. Display和align-self居中
实例：demo15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
display: flex;
}
.text{
background-color: red;
height: 30px;
align-self: center;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
6. 绝对定位和height和margin负宽度的一半居中
实例：demo16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
position: relative;
}
.text{
background-color: red;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
7. 绝对定位和height和margin:auto 0居中
实例：demo17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
position: relative;
}
.text{
background-color: red;
height: 30px;
position: absolute;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
8. 绝对定位和transform居中
实例：demo18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
position: relative;
}
.text{
background-color: red;
height: 30px;
position: absolute;
top: 50%;
transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
9. 使用div填充居中
实例：demo19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
}
.base{
height: 50%;
}
.text{
background-color: red;
height: 30px;
margin-top: -15px;
}
</style>
</head>
<body>
<div id="content">
<div class="base"></div>
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
10. Display和flex-flow和justify-content居中
实例：demo20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#content{
background-color: #008B8B;
height: 100px;
display: flex;
flex-flow: column;
justify-content: center;
}
.text{
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<div id="content">
<div class="text">
使用表格配合垂直对齐属性让文字居中
</div>
</div>
</body>
</html>
效果图
