前言
本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：
一、水平居中
1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
2.块级元素的水平居中
这种情形可以有多种实现方式，下面我们详细介绍:
- ①在一个块级元素定宽的情况下，将该块级元素左右外边距margin-left和margin-right设置为auto
- ②在一个块级元素不定宽的情况下，使用table+margin，先将子元素设置为块级表格来显示（类似），再将其设置水平居中，display:table在表现上类似block元素，但是其宽度为内容宽，且最大宽度为父容器宽度。
- ③在一个块级元素不定宽的情况下，使用absolute+transform，先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。但是其宽度为内容宽，且最大宽度为父容器宽度的一半。不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。
- ④在一个块级元素不定宽的情况下，使用flex+justify-content，通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。但是其宽度为内容宽，且最大宽度为父容器宽度。
- ⑤在一个块级元素不定宽的情况下，使用flex+margin，通过flex将父容器设置为为Flex布局，再设置子元素居中。但是其宽度为内容宽，且最大宽度为父容器宽度。
3.多块级元素水平居中
- ①利用flex布局（flex布局详见本地笔记：Flex布局 FlexBox属性详解）
利用flex布局，利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
同时 根据justify-content 取值的不同多元素剧中排列效果也不一样，涉及水平居中的取值有：
center：所有项目在容器中居中对齐（紧挨着）
space-between：第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分
space-around：所有的项目等分剩余的容器空间，包括第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）
- ②利用inline-block
将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
4.浮动元素水平居中
- 对于定宽的浮动元素，通过子元素设置relative + 负margin
- 对于不定宽的浮动元素，父子容器都用相对定位
- 通用方法(不管是定宽还是不定宽)：flex布局
- ①定宽的浮动元素
通过子元素设置relative + 负margin,原理见下图：
注：样式设置在浮动元素本身，设置relative 后，left： 50%，其中50%是根据父元素的宽来定。
- ②不定宽的浮动元素，通过父子容器都相对定位，偏移位移见下图：
注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素
- ③通用办法flex布局(不管是定宽还是不定宽)
利用弹性布局(flex)的justify-content属性，实现水平居中。
5.绝对定位元素水平居中
这种方式非常独特，通过子元素绝对定位，外加margin: 0 auto来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>水平居中问题详解</title>
<style>
h1 {
text-align: center;
color: blueviolet;
}
.sample {
/* 示例元素样式 */
display: block;
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
}
.clearfix:after {
/* 清除浮动 */
display: table;
content: " ";
clear: both;
}
.session_1 {
background-color: lightgrey;
}
.parent_1 {
width: 600px;
height: 200px;
background-color: skyblue;
text-align: center;
}
.child_1 {
/* 行内子元素child_1 */
background-color: lightpink;
}
.child_2 {
/* 行内inline-block子元素 */
display: inline-block;
/* width: 100px; */
height: 100px;
background-color: lightpink;
}
.fixed_width {
/* 定宽块级元素 */
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
}
.child_3 {
/* 不定宽(其宽度为内容宽且最大宽度为父容器宽度)块级元素 */
display: table;
height: 100px;
margin: 0 auto;
background-color: lightpink;
}
.parent_2 {
position: relative;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_4 {
/* 不定宽(其宽度为内容宽且最大宽度为父容器宽度的一半)块级元素 */
position: absolute;
left: 50%;
transform: translateX(-50%);
/* 最后通过向左移动子元素的一半宽度以达到水平居中 */
height: 100px;
background-color: lightpink;
}
.parent_3 {
display: flex;
justify-content: center;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_5 {
/* 普通不定宽元素 */
height: 100px;
background-color: lightpink;
}
.parent_4 {
display: flex;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_6 {
/* 普通不定宽元素 */
height: 100px;
margin: 0 auto;
background-color: lightpink;
}
.parent_5 {
display: flex;
justify-content: center;
/* justify-content: space-between; */
/* justify-content: space-around; */
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_7 {
width: 100px;
height: 100px;
margin: 0 10px;
background-color: lightpink;
text-align: center;
}
.child_8 {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 10px;
background-color: lightpink;
text-align: center;
}
.float_fixed_width {
width: 100px;
height: 100px;
background-color: lightpink;
float: left;
position: relative;
left: 50%;
margin-left: -50px;
}
.parent_6 {
float: left;
position: relative;
left: 50%;
}
.float_unfixed_width {
float: left;
position: relative;
right: 50%;
background-color: lightpink;
}
.float_fixed_unfixed_width {
float: left;
/* width: 100px; */
height: 100px;
background-color: lightpink;
}
.parent_7 {
position: relative;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_9 {
position: absolute; /*绝对定位*/
width: 100px;
height: 100px;
background-color: lightpink;
margin: 0 auto;
left: 0; /*此处不能省略且设置为0,目的是使absolute生效 */
right: 0; /*此处不能省略且设置为0,目的是使absolute生效 */
}
</style>
</head>
<body>
<h1>水平居中问题详解</h1>
<section class="session_1">
<p>1.行内元素水平居中</p>
<!-- 1.行内元素水平居中 -->
<!-- 利用 text-align: center 可以实现在块级元素（或body）内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 -->
<div class="parent_1">
<span class="child_1">块级元素内的行内元素span居中</span>
<br><br>
<div class="child_2">块级元素中的块级元素居中</div>
</div>
</section>
<br><br>
<section class="session_1">
<p>2.块级元素水平居中</p>
<!-- 2.块级元素水平居中 -->
<!-- 一、在一个块级元素定宽的情况下，将该块级元素左右外边距margin-left和margin-right设置为auto -->
<div class="fixed_width">一个定宽的块级元素div居中</div>
<br><br>
<!-- 二、使用table+margin，先将子元素设置为块级表格来显示（类似），再将其设置水平居中，display:table在表现上类似block元素，但是宽度为内容宽。 -->
<div class="parent_1">
<div class="child_3">不定宽(其宽度为内容宽且最大宽度为父容器宽度)块级元素居中</div>
</div>
<br><br>
<!-- 三、使用absolute+transform，先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。 -->
<div class="parent_2">
<div class="child_4">不定宽(其宽度为内容宽且最大宽度为父容器宽度的一半)块级元素居中</div>
</div>
<br><br>
<!-- 四、使用flex+justify-content，通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。 -->
<div class="parent_3">
<div class="child_5">不定宽(其宽度为内容宽且最大宽度为父容器宽度)块级元素居中</div>
</div>
<br><br>
<!-- 五、使用flex+margin，通过flex将父容器设置为为Flex布局，再设置子元素居中。 -->
<div class="parent_4">
<div class="child_6">不定宽(其宽度为内容宽且最大宽度为父容器宽度)块级元素居中</div>
</div>
</section>
<br><br>
<section class="session_1">
<p> 3.多块级元素水平居中</p>
<!-- 3.多块级元素水平居中 -->
<!-- 一、利用flex布局，利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示。同时 根据justify-content 取值的不同多元素剧中排列效果也不一样，涉及居中的取值有center,space-between,space-around-->
<div class="parent_5">
<div class="child_7">1</div>
<div class="child_7">2</div>
<div class="child_7">3</div>
</div>
<br><br>
<!-- 二、利用inline-block,将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。 -->
<div class="parent_1">
<div class="child_8">1</div>
<div class="child_8">2</div>
<div class="child_8">3</div>
</div>
</section>
<br><br>
<section class="session_1 clearfix">
<p>4.浮动元素水平居中</p>
<!-- 4.浮动元素水平居中 -->
<!-- 一、通过子元素设置relative + 负margin -->
<div class="float_fixed_width">我是要居中的定宽浮动元素</div>
<br><br><br><br><br><br>
<!-- 二、通过子元素设置relative + 负margin -->
<div class="parent_6 ">
<div class="float_unfixed_width">我是要居中的不定宽浮动元素</div>
</div>
<br><br>
<!-- 三、通用办法flex布局(不管是定宽还是不定宽)，利用弹性布局(flex)的justify-content属性，实现水平居中。 -->
<div class="parent_5 ">
<div class="float_fixed_unfixed_width">我是要居中的定宽或者不定宽浮动元素</div>
</div>
<br><br>
</section>
<br><br>
<section class="session_1 clearfix">
<p>5.绝对定位元素水平居中</p>
<!-- 4.浮动元素水平居中 -->
<!-- 这种方式非常独特，通过子元素绝对定位，外加margin: 0 auto来实现。 -->
<div class="parent_7">
<div class="child_9">
让绝对定位的元素水平居中对齐
</div>
</div>
</section>
<br><br>
</body>
</html>二、垂直居中
1.单行内联元素垂直居中
关于行高相关知识详见待发布文章：深入理解 CSS 中的行高与基线
设置内容高度等于行高即可。
2.多行内联元素垂直居中
- ①利用flex布局（flex），利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。
- ②利用表布局（table），将父元素设置为display：table，子元素设置为display：table-cell以及vertical-align: middle，可以实现子元素的垂直居中
3 块级元素垂直居中
- ①使用absolute+负margin(已知高度宽度)
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
- ②使用absolute+transform（高度和宽度未知）
当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
- ③使用flex+align-items（通用，不论高度和宽度是否已知）
通过设置父元素flex布局中的属性align-items，使子元素垂直居中。
align-items：项目会堆放在容器交叉轴的居中位置
④使用table-cell+vertical-align，通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直居中问题详解</title>
<style>
h1 {
text-align: center;
color: blueviolet;
}
.sample {
/* 示例元素样式 */
display: block;
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
}
.clearfix:after {
/* 清除浮动 */
display: table;
content: " ";
clear: both;
}
.session_1 {
background-color: lightgrey;
}
.parent_1 {
width: 600px;
height: 100px;
line-height: 100px;
background-color: skyblue;
}
.inline_1 {
background-color: lightpink;
}
.parent_2 {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: skyblue;
}
.parent_3 {
display: table;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_3 {
display: table-cell;
vertical-align: middle;
/* background-color: lightpink; */
}
.parent_4 {
position: relative;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_4 {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
background-color: lightpink;
}
.parent_5 {
position: relative;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_5 {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: lightpink;
}
.parent_6 {
display: flex;
align-items: center;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_6 {
background-color: lightpink;
}
.parent_7 {
display: table-cell;
vertical-align: middle;
width: 600px;
height: 200px;
background-color: skyblue;
}
.child_7 {
background-color: lightpink;
}
</style>
</head>
<body>
<h1>垂直居中问题详解</h1>
<section class="session_1">
1.单行内联元素垂直居中
<!-- 设置内容高度等于行高即可 -->
<div class="parent_1">
<span class="inline_1">单行内联元素垂直居中</span>
</div>
</section>
<br><br>
<section class="session_1">
2.多行内联元素垂直居中
<!-- 一、利用flex布局（flex）,利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。 -->
<div class="parent_2">
<p class="inline_2">
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
</p>
</div>
<br><br>
<!-- 二、利用表布局（table）,利用表布局的vertical-align: middle可以实现子元素的垂直居中 -->
<div class="parent_3">
<span class="child_3">
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
</span>
</div>
</section>
<br><br>
<section class="session_1">
3.块级元素垂直居中
<!-- 一、使用absolute+负margin(已知高度宽度)，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。 -->
<div class="parent_4">
<div class="child_4">固定高度的块级元素垂直居中</div>
</div>
<br><br>
<!-- 二、用absolute+transform，当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。 -->
<div class="parent_5">
<div class="child_5">不固定高度的块级元素垂直居中。
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
</div>
</div>
<br><br>
<!-- 三、使用flex+align-items，通过设置flex布局中的属性align-items，使子元素垂直居中。 -->
<div class="parent_6">
<div class="child_6">不固定高度的块级元素垂直居中，通过设置flex布局中的属性align-items，使子元素垂直居中。
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
</div>
</div>
<br><br>
<!-- 四、使用table-cell+vertical-align，通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。 -->
<div class="parent_7">
<div class="child_7">不固定高度的块级元素垂直居中，通过设置flex布局中的属性align-items，使子元素垂直居中。
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
</div>
</div>
<br><br>
</section>
<br><br>
</body>
</html>
三、水平垂直居中
这种情形也是有多种实现方式，接下去我们娓娓道来：
方法1：绝对定位与负边距实现（已知高度宽度）
这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。
方法2：绝对定位与margin:auto（已知高度宽度）
这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。
方法3：绝对定位+CSS3(未知元素的高宽)
利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。
方法4：flex布局（次简单写法，子元素定不定宽均可）
利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。
方法5：flex/grid与margin:auto(最简单写法，定不定宽均可)
容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中问题详解</title>
<style>
h1 {
text-align: center;
color: blueviolet;
}
.sample {
/* 示例元素样式 */
display: block;
width: 200px;
height: 200px;
background-color: skyblue;
margin: 0 auto;
}
.clearfix:after {
/* 清除浮动 */
display: table;
content: " ";
clear: both;
}
.session_1 {
background-color: lightgrey;
}
.container_1 {
width: 600px;
height: 400px;
background-color: skyblue;
position: relative;
}
.center_1 {
width: 100px;
height: 100px;
background-color: lightpink;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
.container_2 {
width: 600px;
/* 必须有个高度 */
height: 400px;
background-color: skyblue;
position: relative;
}
.center_2 {
width: 100px;
height: 100px;
background-color: lightpink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 注意此处的写法 */
margin: auto;
}
.container_3 {
width: 600px;
height: 400px;
background-color: skyblue;
position: relative;
}
.center_3 {
width: 100px;
height: 100px;
background-color: lightpink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container_4 {
width: 600px;
height: 400px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.center_4 {
width: 100px;
/* height: 100px; */
background-color: lightpink;
}
.container_5 {
width: 600px;
height: 400px;
background-color: skyblue;
/* display: flex; */
display: grid;
}
.center_5 {
width: 100px;
height: 100px;
margin: auto;
background-color: lightpink;
}
</style>
</head>
<body>
<h1>水平垂直居中问题详解</h1>
<section class="session_1">
方法1：绝对定位与负边距实现（已知高度宽度）
<!-- 这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。 -->
<div class="container_1">
<div class="center_1">center</div>
</div>
</section>
<br><br>
<section class="session_1">
方法2：绝对定位与margin:auto（已知高度宽度）
<!-- 这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。 -->
<div class="container_2">
<div class="center_2">center</div>
</div>
</section>
<br><br>
<section class="session_1">
方法3：绝对定位+CSS3(未知元素的高宽)
<!-- 利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。 -->
<div class="container_3">
<div class="center_3">center</div>
</div>
</section>
<br><br>
<section class="session_1">
方法4：flex布局
<!-- 利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。 -->
<div class="container_4">
<div class="center_4">center</div>
</div>
</section>
<br><br>
<section class="session_1">
方法5：flex/grid与margin:auto(最简单写法)
<!-- 容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。 -->
<div class="container_5">
<div class="center_5">center</div>
</div>
</section>
<br><br>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
