嗷嗷答 - 嗷嗷好的公务员考试网络答题平台

CSS设置块元素水平垂直居中

作者：不烦恼 发布时间：August 24, 2011 分类：开心上网

很简单，但用的时候总是想不起来：

  1. <!doctype html>
  4. <meta charset="utf-8">
  5. <title>CSS设置块元素水平垂直居中</title>
  6. <style type="text/css">
  7. #cm
  8. {
  9. height:200px;
  10. width:400px;
  11. margin:-100px 0px 0px -200px;
  12. padding:0;
  13. position:absolute;
  14. top: 50%;
  15. left: 50%;
  16. }
  18. </head>
  20. <header>
  21.   <hgroup>
  22.   </hgroup>
  23.   <nav>
  24.   </nav>
  25. </header>
  26. <section>
  27.   <div id="cm">
  28.     <p>CSS设置块元素水平垂直居中</p>
  29.   </div>
  30. </section>
  31. <aside>
  32. </aside>
  33. <footer>
  34. </footer>
  35. </body>
  36. </html>

已有 6 条评论 »

  1. iDE@ iDE@
    February 1st, 2012 at 10:24 pm

    喔喔，使用了 HTML5的标准格式。

    水平居中，用 margin:0 auto; 应该可以了吧.

    垂直居中，相对值，也不错喔：
    top: 50%;
    left: 50%;

    回复
  2. 都市放牛 都市放牛
    October 29th, 2011 at 02:01 pm

    margin:-100px 0px 0px -200px;上 右 下 左，这个像素大小怎么来确定的呢？看不懂。

    1. 蚂蚱 蚂蚱
      October 30th, 2011 at 04:31 pm

      哈哈，原来我也一时也迷糊，后来看了下，这个大小就是靠这个块元素大小来设定的。

      回复
    2. 不烦恼 不烦恼
      October 29th, 2011 at 02:07 pm

      height:200px; /*高度200*/
      width:400px; /*宽度400*/
      margin:-100px 0px 0px -200px; /*向上偏移100（高度的50%）向左偏移200（宽度的50%）*/

      回复
    回复
  3. 蚂蚱 蚂蚱
    August 28th, 2011 at 06:59 pm

    margin:-100px 0px 0px -200px; 在这里有没有用？后面 top 和 left 定位了。

    1. 不烦恼 不烦恼
      August 28th, 2011 at 08:52 pm

      有用，而且非常重要
      top 和left可以看成是将块元素左上角定位在了中心
      所以需要用负边距再分别左移和上移块元素宽度和高度的50%

      回复
    回复

添加新评论 »