Question

我想将一个div放在<body>内，但我无法弄清楚如何。我尝试过flexboxes和旧的margin: 0 auto;技巧。这是我的代码：

        <link href="https://fonts.googleapis.com/css?family=Comfortaa|Cutive+Mono|Oswald" rel="stylesheet">
    <link href="../css/ham.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
  <script type="text/javascript">

  //Unselctable Function

    $.fn.extend({ 
        disableSelection: function() { 
            this.each(function() { 
                if (typeof this.onselectstart != 'undefined') {
                    this.onselectstart = function() { return false; };
                } else if (typeof this.style.MozUserSelect != 'undefined') {
                    this.style.MozUserSelect = 'none';
                } else {
                    this.onmousedown = function() { return false; };
                }
            }); 
        } 
    });

    $(document).ready(function() {

        //NAVBAR HIDE

        $('nav').hide();

        //UNSELECTABLE

        $('.unselectable').disableSelection();

        //HAMBURGERS

        var $hamburger = $(".hamburger");
        $hamburger.on("click", function(e) {
        $hamburger.toggleClass("is-active");
        $('nav').slideToggle();
    });
    });
  </script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="../">home</a></li>
            <li><a href="../work">work</a></li>
            <li><a href="../contact">contact</a></li>
        </ul>
    </nav>
    <button class="hamburger hamburger--spin" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div>center this</div>

它只是</body>之后和我关闭的html - 之后没有脚本。

这是我的CSS：

/* FONTS

font-family: 'Comfortaa', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Cutive Mono', monospace;

*/

/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

a {
    text-decoration: none;
    color: white;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*STYLES*/

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background-color: black;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: inherit;
    background-color: #212121;
}

li {
    float: left;
    color: #fff;
    cursor: pointer;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Comfortaa', cursive;
    /*transition*/
    -webkit-transition: color 0.2s; /* Safari */
    transition: color 0.2s;
}

li a:hover {
    color: #BDBDBD;
}

.hamburger {
    position: absolute;
}

button:focus {
    outline: none;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    * {
        width: 100%;
    }

    li a {
        padding: 0;
        padding-top: 14px;
        text-align: center;
    }

    li:last-child {
        padding-bottom: 14px;
    }

}

.content {
     margin: 0 auto;
     width: 100px;
}

^ .content是我想在页面中垂直和水平居中的。我应该说，我也在使用https://jonsuh.com/hamburgers/ - 顺便说一句，这是一个很棒的图书馆。

很抱歉，如果此问题之前已经得到解答，但我无法在任何地方找到它。

由于阿利斯泰尔

Answer 1

你可以用css对任何div进行居中，给它一个固定的宽度和边距（标准方式）。

.any{
  width:300px;/*  use your required wid and height */
  height:300px;
  background:red; /*  Just for example */
  margin :0px auto;
}

你甚至可以看看这个垃圾箱： https://jsbin.com/rewayuwoso/edit?html,css,output

Answer 2

您已省略将内容类放入div html中。

应该阅读<div class="content">center this</div>

然后它将居中。希望这会有所帮助。

但是，使用margin：0 auto仅将其水平居中。

使DIV居中，但与其他CSS不允许它

2 个答案: