CSS 怎样让 div 在页面居中显示? 下面本篇文章给大家介绍一下 CSS 让一个 div 居于页面正中间的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
如何让一个 div 居于页面中间, 我今天说的是让一个 div 水平居中同时垂直居中, 而不是简单的 top:50%,left:50%. 当然, 我们就按一开始的思路写一下: top,left 属性都设为 50%, 看一下效果.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- div 居于页面正中间
- </title>
- <style type="text/css">
- *{ margin: 0; padding: 0; background-color: #EAEAEA; } div{ width: 200px;
- height: 200px; background-color: #1E90FF; } .center-in-center{ position:
- absolute; top: 50%; left: 50%; }
- </style>
- </head>
- <body>
- <div class="center-in-center">
- </div>
- </body>
- </HTML>
从我的截图可以看出, div 的左顶点刚好在页面的中心点处. 现在的思路是, 如何移动 div 然后让 div 的中心和页面中心重合, 即可达到我们一开始想要的结果. 在这里我要介绍一种方法, 使用 CSS 的 transform 属性. 由于这个属性的值很多, 我这里就不一一介绍, 只是说一下它的 translate. 我们给刚才的 center-in-center 类加上 translate(0,-50%)
- .center-in-center{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(0, -50%);
- }
如果使用过这个属性, 应该知道怎么回事了. translate(0, -50%), 第一个值是指水平移动量, 和 tansform 的 translateX 效果一样, 第二个值那就是垂直方向偏移量, 但为负数时, 代表反方向移动. 现在我们只需 tanslate(-50%,-50%) 就可以达到 div 既水平居中同时垂直居中.
附上完整代码与效果:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- div 居于页面正中间
- </title>
- <style type="text/css">
- *{ margin: 0; padding: 0; background-color: #EAEAEA; } div{ width: 200px;
- height: 200px; background-color: #1E90FF; } .center-in-center{ position:
- absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
- }
- </style>
- </head>
- <body>
- <div class="center-in-center">
- </div>
- </body>
- </HTML>
更多 Web 前端自学 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/18195.html