【写在前面】
在我们编写一个网页的时候，居中效果是非常常见的对齐方式。但对于初学者而言，“居中”却 并不那么简单能够实现。本文将在笔者能力所及之处，详细的阐明如何实现居中。
【了解居中前，你必须要知道的---显示模式】
“显示模式”这一概念，听起来十分晦涩，似乎是遥不可攀的一个概念。但当抛出“行内”“块”这些概念时，瞬间恍然大悟。其实这些就是显示模式。常见的元素显示模式有以下几种
- 行内元素
- 块级元素
- 行内块元素
下面我们逐一介绍每个显示模式的特点。
【行内元素(inline)】
行内元素(inline)，又称为内联元素。其特点为：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列 - 其宽高默认由内容撑开，且不可设置宽高
我们通过代码来直观的感受他的特点。
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.demo1 {
background-color: aqua;
}
.demo2 {
background-color: green;
}
</style>
</head>
<body>
<span class="demo1">我无坚不摧，也无所不能</span>
<span class="demo2">长风一吹，野草就连了天</span>
</body>
</html>这段代码的运行结果为：
span是一个典型的行内元素，我们可通过开发者工具加以验证，这两个span在一行呈现，这也就验证了特点一
这里多提一句，细心的读者会发现，这两个span中间怎么有间隔呢？其实这和我们写的代码有关系，在代码中，两个span中间我们敲了一个回车以保证代码的美观，这个回车就被浏览器获取并解释为一个空格了。想要解决这个空格有两个办法
- （非常不推荐）两个span中不用空格隔开
- （推荐）为span的父元素设置font-size:0 再单独为span设置font-size即可解决
本文不主要探讨这一现象，因此也不给出详细的代码，读者可自行尝试，如若解决不了欢迎留言。
我们继续讨论特点二，现在我修改代码
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.demo1 {
width: 300px;
height: 200px;
background-color: aqua;
}
.demo2 {
background-color: green;
}
</style>
</head>
<body>
<span class="demo1">我无坚不摧，也无所不能</span>
<span class="demo2">长风一吹，野草就连了天</span>
</body>
</html>效果为：
可以发现，所设置的宽高并没有生效。
后续的显示模式证明，就不再给出详细示例，只给出特点
【块元素(block)】
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素。默认高度：由内容撑开。
- 可以设置宽高
【行内块元素(inline-block)】
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排
列 - 默认宽高均由内容撑开
- 可以设置宽高
【几种居中办法】
我们了解了这些显示模式后，便方便我们来探讨居中，这是因为对于不同的显示模式，居中策略也不相同。我们下面分情况做讨论。
【行内元素和行内块元素的居中】
在介绍之前，我们先明确一点：对于行内元素和行内块元素，我们可以把他当成 普通文本 来处理
--水平居中--
父元素加上 text-align:center
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.outer {
text-align: center;
}
.demo1 {
background-color: aqua;
}
.demo2 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<span class="demo1">我无坚不摧，也无所不能</span>
<span class="demo2">长风一吹，野草就连了天</span>
</div>
</body>
</html>
--垂直居中--
父元素加上 line-height = height
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.outer {
height: 300px;
text-align: center;
background-color: #888;
line-height: 300px;
}
.demo1 {
background-color: aqua;
}
.demo2 {
background-color: green;
}
span {
font-size: 40px;
}
</style>
</head>
<body>
<div class="outer">
<span class="demo1">我无坚不摧，也无所不能</span>
<span class="demo2">长风一吹，野草就连了天</span>
</div>
</body>
</html>
为方便观察，本例的验证为父容器设置了背景颜色并调整了span的字体大小，最终呈现出了如上图所示的效果
【块级元素的居中】
--水平居中--
子元素加上 margin:0 auto
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.outer {
height: 600px;
text-align: center;
background-color: #888;
}
.demo1 {
width: 200px;
height: 200px;
background-color: aqua;
margin: 0 auto;
}
.demo2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="demo1">我无坚不摧，也无所不能</div>
<div class="demo2">长风一吹，野草就连了天</div>
</div>
</body>
</html>
--垂直居中--
子元素加上 margin-top : (父content - 子盒子总高)/2
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.outer {
height: 600px;
text-align: center;
background-color: #888;
overflow: hidden;
}
.demo1 {
width: 200px;
height: 200px;
background-color: aqua;
margin: 0 auto;
margin-top: 100px;
}
.demo2 {
width: 200px;
height: 200px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="demo1">我无坚不摧，也无所不能</div>
<div class="demo2">长风一吹，野草就连了天</div>
</div>
</body>
</html>
本例中，outer父容器的content区高度为600px 子盒子总高度为 200*2 带入公式计算得100px。
读者在进行验证时，一定要非常注意这里的content区，这涉及到对盒子模型的理解，不是本文的探讨重点。
这里需要做出一点说明，读者在尝试案例的时候，很可能会出现如下情况：
这是因为出现了margin塌陷，父元素将第一个子元素的margin应用在自己的身上了，要解决这个问题，就需要用到bfc机制，其中一种方式就是本例中为父元素添加overflow:hidden。事实上开启bfc的方式有很多种，读者可进行查阅。
【CSS3新方式--伸缩盒模型】
上面，我们介绍了传统上的居中办法，在CSS中，提出了“伸缩盒模型”（弹性盒子）这一概念，为我们带来了新的居中方式。
我们先行给出这种方式
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>行内元素的显示特点</title>
<style>
.outer {
height: 600px;
text-align: center;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.demo1 {
width: 200px;
height: 200px;
background-color: aqua;
}
.demo2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="demo1">我无坚不摧，也无所不能</div>
<div class="demo2">长风一吹，野草就连了天</div>
</div>
</body>
</html>
为方便读者理解，我们还是对该模型做一个粗略的分解以及属性的说明。
要让一个盒子成为伸缩盒，只需要为其添加属性：display:flex 。当我们添加以后，会惊奇的发现，原本应该占两行的div，并排为一行了
有点类似于浮动的效果。
要理解属性的设置，就不得不提出 主轴和侧轴这一概念。
主轴：是伸缩项目（即伸缩盒中的**子元素**）的排列方向。主轴默认是从左向右
侧轴：是一条垂直于主轴的轴。
我们并不关心主轴和侧轴的原点在哪里，只关心方向，换言之，图中所有横向的我们都认为是主轴，纵向的都是侧轴
主轴和侧轴的方向，我们可以通过css来调整，这里仅以默认情况举例。
属性 justify-content: center; 意思是：伸缩项目沿主轴方向上的对齐方式
align-items: center; 意思是：单行伸缩项目沿侧轴方向上的对齐方式
这里的单行，是看沿主轴方向上有多少行，如果不止一行，就应当使用align-content属性来设置对齐方式了。
【利用定位的“特殊”居中】
这里之所以为定位打上“特殊”这个标签，是因为使用定位做的居中是有悖定位属性的使用的，笔者对这种方式其实不甚理解，因此使用也少。无法做出详细的解释，这能提供代码展示
<!DOCTYPE html>
<html lang="en-CN">
<head>
<title>Document</title>
</head>
<style>
.outer {
width: 800px;
height: 400px;
background-color: #888;
position: relative;
}
.inner{
width: 400px;
height: 100px;
font-size: 20px;
background-color: orange;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<!-- 我要让设置好了宽高的inner水平垂直居中 -->
<!-- 方法一：同时设置top bottom left right 为0 且margin:auto -->
<!-- 方法二: left:50% top:50% margin-left:自身宽度的一半 margin-top:自身高度的一半 -->
<div class="outer">
<div class="inner">
我无坚不摧，也无所不能
</div>
</div>
</body>
</html>
至此便将笔者所了解的居中均介绍完了，希望对你有所帮助
2239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
