0

在过去的 40 分钟里，我一直在互联网上到处寻找，试图弄清楚如何正确居中 div 元素。

这是我想要居中的代码片段：

<div id="boxcenter">
            <div id="boxoutline">
                <div id="boxmodel">
                    <p>Cupcake ipsum dolor. Sit amet sweet tiramisu sweet muffin caramels. I love lollipop sweet sweet roll fruitcake dragée.
                    Halvah tootsie roll cookie chocolate cake fruitcake sesame snaps I love I love. Chupa chups gummies I love marshmallow jelly donut powder 
                    dragée danish. Gummies I love fruitcake sweet croissant unerdwear.com dessert chocolate cake pastry.
                    Gummi bears marshmallow I love bonbon. Soufflé liquorice chocolate bar applicake marzipan sweet cake I love pie. Fruitcake 
                    wafer brownie halvah muffin muffin. Gingerbread gingerbread macaroon jelly beans icing soufflé donut marzipan candy canes.
                    </p>
                </div>
            </div>
        </div>

这是我用来创建盒子模型并将其居中的 css。为了使我创建的盒子模型居中，我使用了“boxcenter”的 div id。目标是将这个坏男孩放在页面顶部的中心。

/*BOX MODEL STYLE*/
#boxmodel p{
    border: 2px dashed; 
}

#boxmodel{
    padding: 10px 20px;
    border: 15px solid green;
    margin: 20px;   
    height: 150px;
    width: 700px;   
}

#boxoutline{
    border: 2px dashed;
    width: 810px;
}

#boxcenter{
    position: fixed;
    top: 0px;
    margin: 0 auto;

}

不幸的是，它所做的只是在页面的右上角显示盒子模型，不太确定如何纠正这个问题，如何将它放在页面本身的中心......有什么想法吗？

4

3 回答 3

3

必须设置宽度并移除position:fixed

#boxcenter{
  width: 810px;
  margin: 0 auto;

}

小提琴

于 2013-09-18T04:53:39.767 回答
2

使用这个 css 这对你来说很好

在这里演示

#boxcenter{
  width: 816px;
  margin: 0 auto;

}
于 2013-09-18T04:54:27.780 回答
0

必须设置宽度 

#boxcenter {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

但如果你想固定位置然后

#boxcenter {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -480px;   
}
于 2013-09-18T04:51:48.163 回答