【写在前面】
在我们编写一个网页的时候,居中效果是非常常见的对齐方式。但对于初学者而言,“居中”却 并不那么简单能够实现。本文将在笔者能力所及之处,详细的阐明如何实现居中。
【了解居中前,你必须要知道的---显示模式】
“显示模式”这一概念,听起来十分晦涩,似乎是遥不可攀的一个概念。但当抛出“行内”“块”这些概念时,瞬间恍然大悟。其实这些就是显示模式。常见的元素显示模式有以下几种
- 行内元素
- 块级元素
- 行内块元素
下面我们逐一介绍每个显示模式的特点。
【行内元素(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>
至此便将笔者所了解的居中均介绍完了,希望对你有所帮助