<div>元素在页面中垂直和水平的最佳方法?

我知道左边距:auto;margin-right:汽车;会以水平方向为中心,但是垂直方向的最佳方法是什么呢?


当前回答

请使用以下CSS属性水平和垂直居中对齐元素。这对我来说很有效。

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

其他回答

我在看Laravel的视图文件,注意到他们完美地将文本居中。我立刻想起了这个问题。 他们是这样做的:

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

        .inside {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

结果如下所示:

如果你正在研究新的浏览器(IE10+),

然后你可以使用transform属性在中心对齐一个div。

<div class="center-block">this is any div</div>

这个的css应该是:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

这里的问题是,您甚至不必指定div的高度和宽度,因为它会自行处理。

同样,如果你想把一个div放在另一个div的中心,那么你可以指定外部div的相对位置,然后这个CSS开始为你的div工作。

工作原理:

当您将left和top指定为50%时,div将位于页面的右下四分之一,其左上端固定在页面的中心。 这是因为,左/顶部属性(当以%给出时)是基于外部div(在您的情况下,窗口)的高度计算的。

但是transform使用元素的高度/宽度来决定转换,因此div将向左移动(50%宽度)和向上移动(50%高度),因为它们是以负号给出的,因此将其对齐到页面的中心。

如果你必须支持旧的浏览器(抱歉,包括IE9),那么表格单元格是最流行的方法。

div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

调整左侧和顶部的宽度和高度,即(100% - 80%)/ 2 = 10%

div { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%,-50%); -ms-transform: -50%, -50%;/*即9 */ -webkit-transform (-50%, -50%);/* Chrome, Safari, Opera */ } <身体> <div> div要垂直对齐 < /身体>

位置:主体文档中的绝对div

有位置的元素:绝对的;相对于最近的定位祖先(而不是相对于视口(主体标记),像固定的那样)定位。

然而;如果绝对定位元素没有定位父元素,它将使用文档主体,并随着页面滚动而移动。

来源:CSS位置

这里还有一个方法(防弹),利用“display:table”规则:

标记

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}