CSS实现居中的方法着实不少，在工作中也比较容易实现，本文旨在归纳各种居中的方法，对各种方法有比较清晰的认识，达到在实际工作中 “ 对方抓药 ” 的目的。
工作中有时水平居中、垂直居中会同时实现，本次分开介绍。
水平居中
-
行内元素水平居中
- 给其父元素设置： text-align:center
这里指的是在行内元素不转化为块级元素的情况下，查了好多资料都是这一种方法，不过确实好用，这里父元素应为块级元素。
注意：
- 使用display、position行内元素特性会发生改变（虽然position设置relative没有改变行内元素特性，但是行内元素宽度不确定，也不能准确实现居中）
- transform只适用与块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 150px;
height: 150px;
background: yellow;
text-align: center
}
span {
background: blue;
}
</style>
</head>
<body>
<div class="d1"> //块级元素
<span>hello</span> //行内元素
</div>
</body>
</html>
测试01.PNG
-
块级素水平居中
1.设置 margin: 0 auto;
- 仅适用于块级元素（block），不适用于行内块元素（inline-block）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
}
span {
width:100px;
background: blue;
margin: 0 auto;
display:block; //改为inline-block居中失效
}
</style>
</head>
<body>
<div class="d1">
<span>
hello
</span>
</div>
</body>
</html>
测试02.PNG
2.margin: 0 auto;结合position。
必须设置 left: 0; right: 0;
- 对于块级元素（block）直接margin: 0 auto;就搞定了，当position同时也进行了设置时，块级元素（block）和行内块（inline-block）水平居中都能实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
position: relative;
}
span {
width:100px;
background: blue;
position: absolute;
top:0;
left:0;
right:0;
margin: 0 auto;
/* display: inline-block; */ //设置了position: absolute，默认具有了行内块特性
}
</style>
</head>
<body>
<div class="d1">
<span>
hello
</span>
</div>
</body>
</html>
测试03.PNG
3.transform结合position。
原理是利用positon移动元素左上角至父元素水平中间位置，再利用transform把元素水平中心和父元素水平中心对齐，因为两者百分比参考对象不同，所以必须两次操作。
- 这里适用块级元素（block）和行内块（inline-block），不需要知道快读，若已知宽度也可用其他方法。
- 这里 position 不能设置 relative，虽然它对行内元素有效，但会导致transform 失效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
position: relative;
}
span {
background: blue;
position: absolute;
left:50%; //百分比相对于父元素
transform: translateX(-50%); //百分比相对于自身
}
</style>
</head>
<body>
<div class="d1">
<span>
hello world
</span>
</div>
</body>
</html>
测试04.PNG
4.display:flex/inline-flex
将父元素设置为弹性伸缩盒，通过设置子元素的排列实现水平居中。
- justify-content 设置子元素在主轴方向上中间对齐，实现水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
display: flex;
justify-content: center;
}
span {
background: blue;
height: 50px;
}
</style>
</head>
<body>
<div class="d1">
<span>
hello world
</span>
</div>
</body>
</html>
测试05.png
- 也可以用flex-direction改变主轴方向，然后用align-items或者align-self在侧轴上居中，效果一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
display: flex;
flex-direction: column;
align-items:center;
}
span {
background: blue;
width:100px;
height: 50px;
}
</style>
</head>
<body>
<div class="d1">
<span>
hello world
</span>
</div>
</body>
</html>
测试06.png
5.若width固定，使用绝对定位方式, 以及负值的margin-left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding： 0；
}
.d1 {
width: 250px;
height: 150px;
background: yellow;
position: relative;
}
span {
background: blue;
width:100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="d1">
<span>
hello world
</span>
</div>
</body>
</html>
测试07.png
6.不推荐
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}
//fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中,
目前只支持Chrome 和 Firefox浏览器.
垂直居中
-
行内元素垂直居中
单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
div {
background: yellow;
width: 300px;
height: 200px;
}
span {
background: blue;
line-height: 200px;
}
</style>
<body>
<div>
<span>hello world</span>
</div>
</body>
</html>
测试08.png
图片垂直居中，设置上下padding（父元素高估不设置）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
border: 1px solid;
}
img {
height: 100px;
vertical-align: middle; //不加这个上下会有偏差
padding:20px 0;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试09.png
图片垂直居中，下边这种方法会有一定偏差（父元素高估不设置）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
border: 10px solid black;
line-height: 210px;
text-align: center;
}
img {
height: 200px;
vertical-align: middle;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试10.png
图片垂直居中，图片作为背景。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
height: 300px;
width: 300px;
border: 1px solid;
padding:20px;
}
img {
width:100%;
height: 100%;
display:block;
background:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2206324925,1265061622&fm=200&gp=0.jpg') no-repeat;
background-size:cover;
}
</style>
<body>
<p>
<img src="" alt="">
</p>
</body>
</html>
测试11.png
-
块级元素垂直居中
1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
行内元素可可以转换为inline-block实现居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
height: 200px;
width: 300px;
border: 1px solid;
}
p::after,img {
width:100px;
display:inline-block;
vertical-align: middle;
}
p::after {
content: '';
height: 100%;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试12.png
2.用 vertical-align 属性
vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.container {
display: table;
height: 200px;
width: 300px;
border: 1px solid #000;
}
span {
display: table-cell;
height:100px;
vertical-align: middle;
}
</style>
<body>
<div class="container">
<span>hello</span>
</div>
</body>
</html>
测试13.png
3.使用弹性盒子，设置子元素在侧轴或主轴的排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
display:flex;
/* align-items: center; */
height: 200px;
width: 300px;
border: 1px solid;
}
img {
width:100px;
display:inline-block;
align-self:center;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试14.png
4.transform+position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p { position: relative;
height: 200px;
width: 300px;
border: 1px solid;
}
img {
position: absolute;
top:50%;
transform: translateY(-50%);
width:100px;
display:block;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试15.png
5.position+margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
position: relative;
height: 200px;
width: 300px;
border: 1px solid;
}
img {
display:inline-block;
height:100px;
position: absolute;
top:50%;
margin-top:-50px;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试16.png
6.margin: auto 0;结合position。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
p {
position: relative;
height: 200px;
width: 300px;
border: 1px solid;
}
img {
display:inline-block;
height:100px;
position: absolute;
top:0;
bottom:0;
margin: auto 0;
}
</style>
<body>
<p>
</p>
</body>
</html>
测试17.png
