文章目录
- 行内或类行内元素
- 示例
- 块级元素
- 示例
- 多个块级元素
- 示例1
- 示例2
- 脱离文档流元素的水平居中
- absolute绝对定位的元素
- 示例
- float定位的元素
- 示例
行内或类行内元素
例如：文本和链接
在块级父容器中让行内元素居中，只需使用 text-align: center;。
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #f06d06;
}
header, nav {
text-align: center;
background: white;
margin: 20px 0;
padding: 10px;
}
nav a {
text-decoration: none;
background: #333;
border: 3px solid red;
border-radius: 5px;
color: white;
padding: 3px 8px;
}
</style>
</head>
<body>
<header>
This text is centered.
</header>
<nav role='navigation'>
<a href="#0">One</a>
<a href="#0">Two</a>
<a href="#0">Three</a>
<a href="#0">Four</a>
</nav>
</body>
</html>
块级元素
让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。
无论父级容器和块级元素的宽度如何变化，都不会影响块级元素的居中效果。
常见用法如下所示：
.center {
margin: 0 auto;
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: yellow;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
.center {
margin: 0 auto;
width: 200px;
background: black;
padding: 20px;
color: white;
}
</style>
</head>
<body>
<main>
<div class="center">
I'm a block level element and am centered.
</div>
</main>
</body>
</html>
这种情况下，有多个子块级元素时，会显示成如下的样子。
多个块级元素
如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。
-
使用
inline-block的显示方式 + text-align -
使用了
flexbox的显示方式 +justify-content: center
示例1
使用 inline-block 的显示方式 + text-align。
这种情况下，遇到宽度不够时，子元素会进行换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: yellow;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
border: 2px solid black;
background: yellowgreen;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<main class="inline-block-center">
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
</main>
</body>
</html>
示例2
使用了 flexbox 的显示方式 + justify-content: center，默认情况下，flex-wrap为nowrap，此时元素将不会换行，而是进行缩放。
如果想具体改变缩放时如何处理元素宽度，可使用flex-basis和flex-shrink来设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: yellow;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
border: 2px solid black;
background: yellowgreen;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
.flex-center {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<main class="flex-center">
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
</main>
</body>
</html>
脱离文档流元素的水平居中
这里的情况主要有两种。
-
absolute绝对定位的元素
-
float定位的元素
absolute绝对定位的元素
-
首先是父元素设置成相对定位relation，子元素设置成绝对定位absolute。
-
子元素的left设置为50%，效果为，子元素的左边对上父元素的中间。
-
子元素的margin-left设置为子元素本身宽度的一半x，意思为告诉浏览器，这个元素的占位宽度往左移动x个单位，实际效果就是子元素往左拉了x个单位。
-
如此一来，子元素和父元素的中间都在统一垂直线上。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
main {
margin: 20px 0;
padding: 10px;
position: relative;
height: 100%;
}
.float-center-box{
border: 2px solid black;
padding: 10px;
background: yellowgreen;
font: 20px white;
/* 精髓部分 */
width: 500px;
position: absolute;
left: 50%;
/* 自己一半的宽度 */
margin-left: -250px;
}
</style>
</head>
<body>
<main>
<div class="float-center-box">
<p>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
</div>
</main>
</body>
</html>
float定位的元素
实现这种布局的核心就在于使用伪元素充当占位符：
-
让占位符在文本中浮动
-
左边一栏右浮动
-
右边一栏左浮动
-
同时占位符的高度要等于相应的图片，宽度等于相应图片的一半。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
border: 2px solid black;
overflow: hidden;
}
#l, #r{
width: 49%;
height: 300px;
background-color: yellow;
border: 2px solid black;
}
#l{
float: left;
}
#r{
float: right;
}
/* 假设此处元素为 250px * 250px */
#l:before, #r:before {
content: "";
width: 125px;
height: 250px;
background: blue;
border: 2px solid black;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="float-center-box"></div>
<div id="l"></div>
<div id="r"></div>
</div>
</body>
</html>
