Question

我试图使用一点灵活盒子，我一直试图了解如何做基本的事情，但我无法将div直接置于body中，但是我可以将p内的div元素作为中心。

这是HTML代码：

<!DOCTYPE html>

<html>
    <head>
        <link href="center.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <div class="parent">
            <p class="intro">This is a HTML template file.</p>          
        </div>
    </body>

</html>

这是CSS文件：

body{
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

}

.parent{
    margin: auto;

    width: 300px;
    height: 300px;
    background-color: cornflowerblue;

    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

}

.intro{
    margin: auto;
    color: darkblue;
}

基本上我使用与p元素中div元素居中相同的技术...

这在Safari或Chrome上无效。

Answer 1

您需要将width和height设置为100%至html和body，以便查看整页工作情况。

添加到您的代码：

body{ 
  border:solid; 
}

看看它的位置！

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

.parent {
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: cornflowerblue;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}

<div class="parent">
  <p class="intro">This is a HTML template file.</p>
</div>

Answer 2

的CSS：

body {
  background: #900;
}

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /*
  This doesn't work
  margin-left: -25%;
  margin-top: -25%;
  */

  width: 40%;
  height: 50%;

  padding: 20px;  
  background: red;
  color: white;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

DEMO

jquery的：

$(function() {
    $('.className').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('.className').outerWidth()/2,
        'margin-top' : -$('.className').outerHeight()/2
    });
});

为什么我不能直接将div放在身体中？

2 个答案: