Question

#outer {
    display:table;
    position:absolute;
    height:100%;
    width:100%;
}
#middle {
    display:table-cell;
    vertical-align:middle;
}
#inner {
    margin:50px auto 50px auto;
    width:600px;
}

<body>
    <div id="outer">
        <div id="middle">
            <div id="inner">
                dead centered onto screen
            </div>
        </div>
    </div>
</body>

这是在屏幕中间以div为中心的最有效或被接受的方式吗？我问，因为除了表格数据之外的任何表格都是如此，特别是对于构建界面，这是非常不受欢迎的。

Answer 1

使用CSS变换或flexbox。

选项1：CSS（2D）转换。 Global support: 90.8%。诀窍是将元素从顶部和左侧定位50％，并在相反方向上将其自身尺寸偏移一半。这种方法的唯一缺点是，由于子像素转换，它可能导致模糊文本渲染。

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: #eee;
  min-height: 100vh;
  width: 100%;
  position: relative;
}
.wrapper > .content {
  background-color: #ddd;
  padding: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="wrapper">
  <div class="content">Centered</div>
</div>

＆＃13;

选项2：CSS flexbox。 Complete global support: 82.81%。与CSS转换相比，浏览器支持更小的补丁，但涉及的线路更少。诀窍是将align-items和justify-content都设置为父元素的中心。

＆＃13;

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: #eee;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper > .content {
  background-color: #ddd;
  padding: 10px;
}

＆＃13;

<div class="wrapper">
  <div class="content">Centered</div>
</div>

＆＃13;

Answer 2

嗯，还有第二种方式....尝试：margin-left:auto; margin-right:auto;

这是以div为中心的最有效方式吗？

2 个答案: