前言
总结实现水平方向、垂直方向的元素居中的方法以及应用场景。
一、水平居中
场景：行内元素的水平居中——在父元素中设置：text-align:center;
场景：元素内部文字水平居中--在元素中设置：text-align:center;**
具体例子：
注意，例子中a标签是行内元素，padding的设置对其本身高度没有影响，左右padding生效，上下padding不生效。这是需要设置其为display:inline-block才能让padding的设置生效。
设置为inline-block后上下padding生效.png
二、块级元素的水平居中
场景：块级元素的水平居中
方法：设定宽度值，然后设置margin：0 auto。先设定宽度值，让块级元素不会占满整行宽度，然后margin的auto设置才生效。
如果还需要设定块级元素内部文字居中，就再使用text-align:center
具体例子：
Paste_Image.png
页面居中布局：
Paste_Image.png
三、vertical-align实现的单行图片居中
说明：vertical-align这个属性，是只对行内元素和table-cell才起效果。设置元素的基准线：top/bottom/middle。
应用场景：父容器只包含一个图片img，父容器高度不固定，是可变的，要让图片垂直居中
因为vertical-align这个属性，是只对行内元素和table-cell才起效果这个特性，对于img这个行内元素生效，设置为vertical-align:middle。然后可以在图片img前面通过伪元素插入一个行内元素，设置为inline-block，设置其高度和父元素高度一样，然后设置为vertical-align:middle，这样两个元素都是基线中间对准，就实现图片的居中。
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
/*样式设置*/
.box{
border:1px solid black;
width:400px;
height:400px;
text-align:center;
}
.box:before{
content:" ";
display:inline-block;
height:100%;
vertical-align:middle;
}
.box img{
width:300px;
height:260px;
vertical-align:middle;
}
Paste_Image.png
四、table-cell实现居中
场景：利用table-cell表格可以使用vertical-align的特性，将元素display为table-cell，但这样也会有相应的副作用，成为一个表格。这个方法的使用看具体情况而定，设置display:table-cell没有别的副作用的话，就可以使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
/*样式设置*/
.box{
border:1px solid black;
width:400px;
height:400px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.box img{
width:300px;
height:260px;
}
五、垂直居中
这一类型的实现，方法的选择需要根据具体场景而来，而非一味套用同一种方法。
1、场景一：对于元素中的文字内容会不断增加，然后还要保证不管加多少文字，都还是居中。
方法：只需要在元素不设定高度值的情况下，简单设置上下padding值相等就行。
Paste_Image.png
Paste_Image.png
一般而言，不要刻意给元素设定高度，让其由内容撑开，这样做比较好。
２、场景二：单行元素的垂直居中
方法：设置高度值和行高值相等就行
<div class="btn">
<a>hello world</a>
</div>
/*样式设置如下：*/
.btn{
text-align:center;
color:#fff;
background-color:red;
border:none;
height:80px;
line-height:80px;
}
Paste_Image.png
六、垂直水平绝对居中
1、情景一：父元素的宽度不是固定的，比如页面宽度。在任何宽度的显示器打开，内容都是垂直水平居中的。
方法这种应用场景的实现就需要借助：绝对定位，然后设置top/left为50%，然后设置margin-left和margin-top为宽高的各一半大小。
然后不管屏幕大小怎么缩小放大变化，子元素永远都是在垂直水平居中位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:pink;
}
.mid{
position:absolute;
width:200px;
height:200px;
background-color:#fff;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="mid">
</div>
</div>
</body>
</html>
Paste_Image.png
实现效果：
Paste_Image.png
情景二：父元素固定宽高，子元素也固定宽高，实现子元素垂直水平绝对居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
/*样式设置*/
.wrapper{
position:relative;
width:400px;
height:400px;
border:1px solid black;
}
.box{
position:absolute;
width:200px;
height:200px;
border:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
效果截图：
Paste_Image.png
情景三：如果子元素的宽高不确定，根据子元素内的内容来撑开宽高的。那么要怎么保证子元素居中呢？这时候用到CSS3的属性：transform:translate(-50%,-50%);
具体实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:pink;
}
.mid{
position:absolute;
background-color:#fff;
top:50%;
left:50%;
/*CSS3属性的实现*/
transform:translate(-50%,-50%);
/*没有width和height，无需再设置margin-left和margin-top的大小了*/
text-align:center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="mid">
<h1>hahahahahhahah</h1>
<h1>haha</h1>
<h1>haha</h1>
</div>
</div>
</body>
</html>
实现效果：
Paste_Image.png
平时用惯了这种“父相子绝”的用法，会忽略我大多数时候的用法都是父元素固定宽高，子元素固定宽高的情况下使用的。会以为这种方法下，子元素是能撑开父元素的，忘了实际是父元素本身的宽高的撑开，而子元素设置为position:absolute则是已经脱离文档流了，只能保证它在父元素的位置范围内，而无法撑开高度。今天因为忽略这一点，一直在找撑开父元素的方法，但其实是不合理的。
面对这种需求：父元素使用相对定位relative，子元素使用绝对定位absolute，这个时候子元素脱离了文档流，父元素的高度是0，想要用CSS方法，让父元素的高度根据子元素的高度自适应，让父元素被撑开。以后就要记得是无法实现的，要用JS的方法
JS方法，是将子元素的高度值赋值给父元素的高度，才将其撑开。
七、扩展：全屏方式的实现：
1、实现方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="mid">
</div>
</div>
<div class="wrapper wr2">
<div class="mid">
</div>
</div>
</body>
</html>
/*样式设置*/
*{
margin:0;
padding:0;
}
body,html{
height:100%; /*父元素的根节点高度也进行设置*/
}
.wrapper{
height:100%;
background-color:blue; /*和父元素的高度相同*/
}
.wr2{
background-color:pink;
}
这样就能实现全屏，多屏滚动，每屏都是全屏幕的效果：
滚动至中间截图
2、实现方法二：单屏的全屏
不需要滚动，只需要占据屏幕全屏的做法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="mid">
</div>
</div>
</body>
</html>
/*样式设置*/
.wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:pink;
}
这种方法，不再需要设置任何宽高，只需要设定绝对定位，top/left/bottom/right都设置为0即可
Paste_Image.png
网友评论