在 Div 中创建一个 div - 在中间答案

【问题标题】：Make a div inside Div - in the middle在 Div 中创建一个 div - 在中间
【发布时间】：2015-01-26 09:02:10
【问题描述】：

我正在尝试在另一个恰好位于中间的 div 中创建一个 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/

【问题讨论】：

css-tricks.com/centering-css-complete-guide
Horizontally center a div in a div的可能重复
你有没有试过研究这个？
div "header" 应该相对于 "div" master-wrapper"
这个问题每天都会发布。询问前请参考谷歌。

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

下面的 sn-p 允许您水平和/或垂直居中 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>

【讨论】：

【解决方案3】：

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

<!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>

You can test in live editor if you want

【讨论】：

【解决方案4】：

margin: 0 auto;

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

margin: 0 auto 0 auto;

为了控制顶部和底部边距，边距值如下：

margin: top right bottom left;

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

尝试使用填充：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 的母容器。

【讨论】：