Question

我在互联网上到处寻找过去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;

}

不幸的是，它正在做的是在页面的右上角显示框模型，并不完全确定如何纠正如何将其置于页面本身上......任何想法？

Answer 1

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

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

}

Fiddle

Answer 2

使用此css这将适合您

<强> DEMO HERE

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

}

Answer 3

必须设置宽度

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

但是如果你想要定位，那么

#boxcenter {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -480px;   
}

在页面上居中一个Div元素？

3 个答案: