Question

不在页面中间，如margin：0 auto; 我在中心谈论从上到下。提前谢谢！

Answer 1

有多种方式：

position: absolute;
left: 50%;
top: 50%;
margin-left: <50% of width from element>;
margin-top: <50% of height from element>;

或：

<强> HTML

<div id="content-wrapper">
    <div class="wrapper">
        Some text  
    </div>
</div>

<强> CSS

#content-wrapper {
   display: table;
   width: 100%;
   height: 100%;
   text-align: center;
}
.wrapper {
   display: table-cell;
   vertical-align: middle;
   position: relative;
}

注意：这不会每次都有用..我自己做site。

Answer 2

使用html5，使用flexbox非常简单：

本文介绍了如何执行此操作 http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

这里是演示（也来自文章） http://jsfiddle.net/pnNqd/

HTML：

<h1>OMG, I’m centered</h1>

CSS：

html {
    height: 100%;  
} 

body {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser,
                                    older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21+ */
    display: flex;      /* NEW: Opera 12.1, Firefox 22+ */

    -webkit-box-align: center; -moz-box-align: center; /* OLD… */
    -ms-flex-align: center; /* you know the drill now… */
    -webkit-align-items: center;
    align-items: center;

    -webkit-box-pack: center; -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center;
    justify-content: center;

    margin: 0;
    height: 100%;
    width: 100%; /* needed for Firefox */
} 

h1 {
    display: -webkit-box; display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-align: center; -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    height: 10rem;
}

Answer 3

如果您的div绝对定位，这是最简单的方法。条件。你的div必须有固定的宽度和高度

#myBox{width:50px; height: 50px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border:solid 1px #000;}

请参阅http://jsfiddle.net/zM2J2/

放置边框以显示轮廓。

如何在页面中间放置div

3 个答案: