Question

我试图制作一个水平和垂直居中的div，它没有100％的宽度和高度，但宽度和高度都是80％。我只是想在视口的中心做一个盒子。我正在避免vh和vw单位。

我找到了这样的解决方案： -

<div class="centered-box">
This is a box
</div>

CSS是

.centered-box {
 margin: auto;
 top:    0;
 left:   0;
 right:  0;
 bottom: 0;
 position: absolute;
 width: 80%;
 height: 80%;
 border: 1px solid black;
}

这样可行但是当我使用BootStrap3的.container类时，这个容器行为不端。内容也溢出。我认为这是由于容器的绝对定位。我只想要一个完全不同的概念。由于绝对定位，我不想使用这种方法。

Answer 1

试试这个

<div class="centered-box">
This is a box
</div>

的CSS

.centered-box {
    margin: 10% auto;
    width: 35%;
    padding: 20px;
    border: 1px solid black;
}

Answer 2

HTML

classdef ShiftType
%SHIFTTYPE Defines shift type
enumeration
    LateralCst %in meters
    RadialCst % in radians
    RadialVar % in beam distance ratio(1 = moves from one beam to another).
    LateralVar % Same. Lateral shift calculated at focus range.
end
end

的CSS

<div class="outer">
   <div class="middle">
      <div class="inner">
         <div align="center">
            <h1>The Content</h1>

            <p>Once upon a midnight dreary...</p>
         </div>
      </div>
   </div>
</div>

Answer 3

中心div在a **中总是很痛苦。我发现这个非常有用的网站：http://howtocenterincss.com/

试一试。你有一个非常简单的问题来解答你不会集中注意力的问题。

如何制作一个垂直和水平居中的盒装div容器

3 个答案: