当前位置:首页 > 个人杂谈 > 正文内容

分享CSS实现垂直居中的最简单方法

日期: 2019-12-17 | 分类: 个人杂谈 | 浏览: 310次

以往我一直不知道CSS中的DIV中垂直居中怎样能实现,一来是自己很少修改模板,二来对于CSS没有系统学习。因此,每次碰到不能解决的问题时,都会百度一下。

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居中于屏幕的正中央了。

等等,别走! ^_^

好消息,快手官方发红包啦,登录即送2元,秒提现! 查看详情>>

  • 评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?

◎欢迎大家参与讨论

站内搜索