分享CSS实现垂直居中的最简单方法
作者: 葛屹肃 | 日期: 2019-12-17 | 分类: 个人杂谈
以往我一直不知道CSS中的DIV中垂直居中怎样能实现，一来是自己很少修改模板，二来对于CSS没有系统学习。因此，每次碰到不能解决的问题时，都会百度一下。
今天在修改博客的模板时，就碰到需要实现DIV垂直居中，经过查询资料后，终于知道如何实际，其实，方法也是相当简单，其中涉及3个元素，我们先来了解一下。
1、position：规定元素的定位类型。
由于position的值为static（静止的、不可以移动的），元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。所以，想要移动元素的位置，就要把position设置为不是static的其他值，如relative,absolute,fixed等。然后，就可以通过top、bottom、right、left等属性使它在文档中发生位置偏移。
2、top: 规定元素的顶部边缘。
注：top可以使用象素外，也可以使用百分比业定义顶部边缘。
3、margin-top：设置元素的上外边距。
了解这3个元素后，对于如何设置垂直居中一看就明白，以下是完整的代码。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto;
position: relative; /*设置position类型*/
top: 50%; /*设置top50%*/
margin-top: -100px; /*设置上边沿为-100px，即让top上移100px，正好是DIV高茺减半*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
以上红字部分就是实现CSS的DIV垂直居中代码，先设置position为非static状态，然后通过top设置为 50%，然后通过设置margin-top来定位。这样可以DIV居中于屏幕的正中央了。
文章链接：https://www.geyisu.com/1214.html
