您现在的位置是: 首页 » 网页代码 » css怎么使div居中显示
网页代码

css怎么使div居中显示

网站优化小编十一月 10, 2019 6人已围观

在开发过程中,很多需求需要我们居中一个div,那么如何使div居中显示?下面网页制作代码教程栏目就来给大家介绍一下使用CSS设置div居中显示的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

margin:0 auto实现div水平居中

HTML代码:

<div class="center">       <div class="box"></div></div>

css代码:

.center{width: 300px;height: 200px;background-color: #009999;}.box{width: 100px;height: 100px;background-color: red;margin:0 auto;}

效果图:

网站运营中栏目排名优化技巧

CSS div垂直居中

1.使用绝对定位和负外边距对块级元素进行垂直居中 (已知元素的高度)

如果我们知道元素的高度,可以这样来实现垂直居中:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css 垂直居中</title><style>.box{width: 300px;    height: 300px;    background: #ddd;    position: relative;}.child{width: 150px;    height: 100px;    background: orange;    position: absolute;    top: 50%;    margin: -50px 0 0 0;    line-height: 100px;}</style></head><body><div class="box">    <div class="child">css 垂直居中</div></div></body></html>

效果图:

网站运营中栏目排名优化技巧

这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。

2. 使用绝对定位和transform(未知元素高度)

如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transform 的 translate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css 垂直居中</title><style>.box{width: 300px;    height: 300px;    background: #ddd;    position: relative;}.child{background: #93BC49;    position: absolute;    top: 50%;    transform: translate(0, -50%);}</style></head><body><div class="box">    <div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div></div></body></html>

效果图:

网站运营中栏目排名优化技巧

这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了,因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

3. 使用flex布局

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css 垂直居中</title><style>.box{width: 300px;    height: 300px;    background: #ddd;    display: flex;    flex-direction: column;    justify-content: center;}.child{width: 300px;    height: 100px;    background: #08BC67;    line-height: 100px;}</style></head><body><div class="box">    <div class="child">css 垂直居中了--弹性布局</div></div></body></html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:199天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2509 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们