Question

我已经好好抚摸这段代码好几个小时了，并没有得到任何建议。

最初我想，“嘿，做一张桌子然后垂直地改变那块......”但显然，要么我是一个做错了的白痴或 ...是的我只是白痴。

<html>
     <head>
          <style type='text/css'>
     html, body{
          margin:0;
          padding:0;
          display:table;
     }
     #centerme{
          display:table-cell;
          vertical-align: middle;
          height:100px;
          width:100px;
     }
     </style>
 </head>
     <body>
          <div id='centerme'></div>
     </body>
</html>

我觉得好像这个html中缺少了一些奸诈的东西。

我没有使用CSS3或CSS的任何第三方库 _不适用于所有浏览器

position: relative;
    top: 50%;
    transform: translateY(-50%);

Answer 1

如果你想两个水平和垂直对齐，试试这个：

html, body {
    margin:0;
    padding:0;
}
#centerme {
    height:100px;
    width:100px;
    border:1px solid #999;
    position:absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

<div id='centerme'>center</div>

Answer 2

以下是不使用display: table

的垂直居中示例

＆＃13;

html, body{
  margin:0;
  padding:0;
}
#centerme{
  height:100px;
  width:100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;  /*  -(height/2)px  */
  border:1px solid;
}

＆＃13;

<div id="centerme"></div>

＆＃13;

以此为中心

2 个答案: