如何在没有绝对定位的情况下在身体元素内垂直和水平居中？

Question

如何在没有绝对定位的情况下在身体元素内垂直和水平居中？

我已经阅读了无数关于垂直对齐和居中div的Q&A和博客文章,但我无法让最简单的情况起作用:直接在html体内的空20x20 div.

HTML:

 body
    {
        background-color:DarkGray;
        display:table;
    } 

    .box
    {
        background-color:black;

        display:table-cell
        margin:0, auto;    
        
        width:20px;
        height:20px;
    }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这是JSFiddle.

Answer 1

Dan*_*mms 16

display:table并且display:table-cell很糟糕,远离他们.这是一种将div内部居中的非常常见的方式<body>.它定位元素的顶部和左侧的内50%的点body,然后减去1/2 width,并height从margin-top和margin-left.

的jsfiddle

.box {
  background-color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  /* -1/2 width */
  margin-top: -10px;
  /* -1/2 height */
}

Run Code Online (Sandbox Code Playgroud)

因为没有它们你可以做任何事情,它们被设计成仅用于表格单元格.他们可以做的一件我不认为你可以做的事情是垂直居中多行文字. (2认同)

归档时间：	12 年，6 月前
查看次数：	22740 次
最近记录：	5 年，12 月前