Question

我正试图在另一个正中间做一个div。有没有更好的方法呢？

body, html
{
    margin:0;
    height:100%;
}

#master_wrapper
{
    width:100px;
    height:100px;
    background:#57a957;
}

#header
{
    left:50%;
    width:50%;
    height:50%;
    background:red;
}

<div id="master_wrapper">
<div id="header">
    Header
</div>

http://jsfiddle.net/uba1wr52/

Answer 1

margin: 0 auto;

这将自动水平居中你的div，上边距和下边距为0;你也可以这样做：

margin: 0 auto 0 auto;

为了控制上边距和下边距，边距值如下：

margin: top right bottom left;

Answer 2

width: 100%;          // can be in pixels also.  
margin: 0 auto;

Answer 3

尝试使用填充：http://jsfiddle.net/5oxg9aay/1/

body, html {
    margin: 0;
    height: 100%;
}

#master_wrapper {
    width: 58px;
    height: 58px;
    background: #57a957;
    padding: 4%;
}

#header {
    background: red;
    width: 100%;
    height: 100%;
}

或在标题中使用position: absolute;并使用左/右/上/下，但您需要将#master_wrapper设为#header的母容器。

Answer 4

您可以通过将样式“margin：0px auto”添加到css文件中的#header来使内部div完全位于中间。

Answer 5

如何将HTML元素放置在水平和垂直中间的示例

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Div in middle</title>
    </head>
    <body>
        <div style="
                    background: red;
                    width   : 300px;
                    height  : 100px;
                    ">
            <div style="
                        background  : #fff;
                        width   : 123px;
                        height  : 67px;
                        margin  : 0 auto;
                        position: relative;
                        top     : 50%;
                        transform   : translateY(-50%);
                        ">
                Div in middle of other div
            </div>
        </div>
    </body>
</html>

＆＃13;

You can test in live editor if you want

Answer 6

您知道，因为您没有设置课程的定位，所以很多css都是无意义/多余的。即使用top:... left:... right:...和/或bottom:...您需要将您的定位设置为absolute;

下面的代码段允许您水平和/或垂直居中div元素：

html,
body {
  padding: 0;
  margin: 0;
}
#master_wrapper {
  width: 100px;
  height: 100px;
  background: #57a957;
  position: relative;
}
#header {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  
  
  margin:0 auto; /*horizontally center*/
  left:0;
  right:0;
  
  
    -webkit-transform: translateY(50%); /*vertically center*/
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

<div id="master_wrapper">
  <div id="header">
    Header
  </div>

在Div中做一个div - 在中间

6 个答案: