声明：文章转载自《面试之道 - 元素实现水平垂直居中的CSS解决方案》
写出几种常见的水平垂直居中方式。
这是一个典型的面试问题，典型的什么地步呢，基本上每次面试的时候都会遇到，就是这么夸张。网上也有非常多的关于实现水平垂直居中的方法，甚至连实现原理都讲得非常细的文章也有。在N年以前我也曾写过一篇这样的博文，一句话，时代在进步，技术在更新，实现方案也更是五花八门。这边文章重在解决方案，没有剖析其实现原理。
在这里针对的就是元素的水平垂直居中，内容的水平垂直居中解决方案也比较的多，另起一片文章来输出。
在已知元素宽度高度
在已知元素宽度和高度的情况下很容易想到的解决方案就是使用 positions + margin 进行实现，这两个属性的不同结合方式也衍生出不一样的解决方案。
position + margin 解决方案一
绝对定位，设置四个方向的值皆为0，外边距皆为auto;
HTML >>>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
background-color: #ffc107;
}
position + margin 解决方案二
绝对定位，上左方向50%；上左外边距负的元素宽高的一半
HTML >>>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
background-color: #ffc107;
}
未知元素宽度和高度
元素的宽度在位置的情况下就不能使用margin来控制元素居中，其替换方案还是比较多的。同样的元素宽度高度未知的水平垂直居中解决方案同样适用于元素宽度高度已知的情况。
position + transform
使用
margin移动元素需要确定当前元素移动的具体数值，在未知元素宽度高度的情况下显然已经不合适，就需要更换使用CSS3的transform属性进行2D转换。
HTML >>>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div class="box">
随便打一些字填充内容。<br>
American<br>
Australian<br>
French<br>
Chinese
</div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
.box {
display:inline-block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:12px;
background-color:#ffc107;
}
display + vertical-align
利用行内块元素垂直对齐的属性与水平对齐属性相结合。
HTML >>>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div class="box">
随便打一些字填充内容。<br>
American<br>
Australian<br>
French<br>
Chinese
</div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
body{
text-align: center;
}
body::after{
content:" ";
font-size:0;
display:inline-block;
height:100%;
vertical-align: middle;
}
.box {
display:inline-block;
padding:12px;
vertical-align: middle;
text-align: left;
background-color:#ffc107;
}
display:flex
使用flex是非常简单的方法，但是在属性的应用与理解上较于其他属性会稍微困难一些，需要多尝试练习。
HTML >>>
<!DOCTYPE html>
<html>
<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>
</head>
<body>
<div class="box">
随便打一些字填充内容。<br>
American<br>
Australian<br>
French<br>
Chinese
</div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
body{display:flex;justify-content: center;align-items:center;}
.box {
padding:12px;
background-color:#ffc107;
}
display:table
将元素转化成表格的形式比较的少见，但确实是一个比较不错的方法，单元格可以设置内容的显示位置，直接设置水平垂直居中即可，非常的容易理解。
HTML >>>
<!DOCTYPE html>
<html>
<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>
</style>
</head>
<body>
<div class="box">
随便打一些字填充内容。<br>
American<br>
Australian<br>
French<br>
Chinese
</div>
</body>
</html>
CSS >>>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: #fff;
}
html{display: table;}
body{display:table-cell;vertical-align: middle;text-align: center;}
.box {
display:inline-block;
padding:12px;
text-align: left;
background-color:#ffc107;
}
总结
其实这些方案不单单能够实现在页面中的水平垂直居中，在元素内部同样效果俱佳。任何效果不能单单局限在看代码上，只有动手操作才能get到技能点，真正领悟其精髓所在。
最后，文章输出不易，转载请注明出处。
网友评论