Question

您好，我目前正在为“虚构的飞机公司”开发一个网站项目。我希望能够使“主div”居中，但由于某种原因，我在右侧有很多空白。我尝试将margin设置为0，并将width设置为100％，但是我无法弄清楚问题所在。

.main{
  position: absolute;
  margin: 0px;
  align-items: center;
  width: 80%;
  line-height: 2em;
  display: flex;
  flex-direction: column;
}

<div class="main">
    <div class="">
        <h1>Bestill fin flyreise</h1>
        <select class="" name="">
            <option value=""><-- Fly fra--></option>
            <option value="">Sarpsborg</option>
            <option value="">Fredrikstad</option>
            <option value="">Askim</option>
            <option value="">Moss</option>
            <option value="">Halden</option>
        </select>
        <select class="" name="">
            <option value=""><-- Fly fra--></option>
            <option value="">Sarpsborg</option>
            <option value="">Fredrikstad</option>
            <option value="">Askim</option>
            <option value="">Moss</option>
            <option value="">Halden</option>
        </select>
        <p>Utreisedato</p>
        <input type="date" name="" value="">
        <p>Antall reisende</p>
        <input type="number" name="" value="" max="5">
        <label for="">
        <input type="radio" name="" value=""> VIP plass (250,-)
        </label>
        <button type="button" name="button">Bestill flyreise</button>
    </div>
</div>

JSFiddle： https://jsfiddle.net/znvgx143/

Answer 1

只需将margin的CSS规则中的margin: 0px auto;值更改为.main。左右边距的auto值进行居中。（注意：这种特殊的居中方法与flexbox无关，它可以使用justify-content: center使 children 元素居中，但不能使元素本身居中）

https://jsfiddle.net/tczeq586/

Answer 2

.main{
  margin: 0 auto;
  align-items: center;
  width: 80%;
  line-height: 2em;
  display: flex;
  flex-direction: column;
}

您的0px后的“自动”应予以解决:)

为什么我不能使用flexbox将包装器div居中？

2 个答案: