开发者学堂课程【前端开发CSS基础：CSS 居中总结 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4274
CSS 居中总结
内容介绍：
一、 居中方式
二、margin：0 auto 代码演示
三、文字居中代码演示
四、table 居中代码演示
五、利用伸缩盒居中代码演示
一、 居中方式
1. margin:0 auto;
2.文字居中：line-height；text-align：center；
3.由 table 演变来的一种居中
4.利用伸缩盒居中
二、 margin：0 auto 代码演示
新建一个 HTML 项目，并命名为 center。
在之前*是做为通配符，在上节课学习到*在IE当中并不代表通配符而是根源族的意思，所以为了匹配、适应各种浏览器就需要用到 html.body 的方式来进行初始化
（1）代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
<div class="container”>
<div class=”header”></div>
</div>
</body>
</html>
执行效果如下
此时，能看到两个 div 块。
（2）想让里面的div块来进行居中
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
}
执行效果如下
得到紫色的 header 居于了中间
三、 文字居中代码演示
(1)代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
height:70px;
background -color: aquamarine ;
}
.header{
width:80%;
min-width:996px;
height:70px;
background -color: blueviolet;
margin：0 auto；
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
执行效果如下
上方的边距是由于 ul 没有被初始化
（2）初始化 ul
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body.ul{
margin:0;
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
执行效果如下
此时边距消失。
（3）水平显示
有多种方式：
1. float 让他浮动
2. 设置为 inline-block
3. 设置为盒子，伸缩盒
在本次演示中使用 float
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width:996px;
height:70px;
background -color: aquamarine ;
}
.header{
width:80%;
min-width:996px;
height:70px;
background -color: blueviolet;
margin：0 auto；
}
ul li {
float:left;
list-style-type:none;
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
执行效果如下
想让水平并局中；
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
执行效果如下
发现并没有居中，我们需要寻找错误，因为 ul 和 li 标签是包含在盒子里的，
所以 ul li 中的 text-algin:center; 应该放在 header 中。还有是设置了 float ，它会脱离文档流就不能使用，需要把 float 变成 display 即可。
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
html.body{
margin:0;
padding:0;
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
运行效果如下：
（4）垂直显示
代码如下：
<!DOCTYPE html>
<html long="en">
<head>
<meta charset="UTF-8”>
<title></title>
<style>
hml.body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="container”>
<div class=”header”>
<ul>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<li>列表项目<li>
<ul>
</div>
</div>
</body>
</html>
运行效果如下：
四、table 居中代码演示
（1）代码如下：
<!DOCTYPE html>
<html long="en">
<head>
}
</style>
</head>
<body>
<div class="t”>
<p>哈哈</p>
</div>
</body>
</html>
运行效果如下：
可以看到 div 上承载了一个哈哈的标签
五、利用伸缩盒居中代码演示
新创建一个 HTML 文件，并命名为 boxcenter；
（1）代码如下：
<lDOCTYPE html>
<html lang=“en">
<head>
<style>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下：
（2）粉色的 div居中
代码如下：
<lDOCTYPE html>
<html lang=“en">
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下：
效果是水平居中
还要在进行垂直居中：
代码如下：
<lDOCTYPE html>
<html lang=“en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下：
(3)文字居中
代码如下：
<lDOCTYPE html>
<html lang=“en">
<head>
. inner{
display：-webkit’-box;
width:100px;
height:100px;
background -color: antiquewhite ;
-webkit-box-pack:center;
-webkit-box-align:center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
哈哈
</div>
</div>I
</body>
</html>
效果如下：
