调整浏览器大小时，如何使部分中的对象保持居中？答案

【问题标题】：How do I keep objects in sections centered when the browser is resized?调整浏览器大小时，如何使部分中的对象保持居中？
【发布时间】：2020-06-26 09:06:26
【问题描述】：

我正在创建一个分为 2 列的网站：左列是菜单，右列是滑块。我在部分中以 <div> 为中心时遇到了一些问题。

我希望当我调整浏览器大小时，我的对象完全居中，因为目前当我调整浏览器大小时，菜单中的最新项目不会保持原位。即使我移除了滑块，也会发生这种情况。

当我调整浏览器大小时，如何确保我的对象完全居中？

这是截图：

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* needed to be able to use 100% height in the columns */
  overflow: hidden;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.column {
  height: 100%;
  float: left;
}

.c20 {
  width: 20%;
  background-color: yellow;
}

.c80 {
  width: 80%;
  background-color: red;
}

header {
  height: 20%;
}

section {
  height: 60%;
}

footer {
  height: 20%;
}

header,
footer {
  background-color: rgba(200, 200, 200, 0.5);
}

section,
header,
footer {
  padding: 10px;
}


/* Menu */

.vertical-menu {
  width: 100%;
  /* Set a width if you like */
  height: 100%;
  position: static;
}

.vertical-menu a {
  color: black;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 15px 0;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
  text-align: center;
  width: 100%;
}

.vertical-menu a:hover {
  background-color: ;
  /* Dark grey background on mouse-over */
}

.image-slider {
  position: relative;
  width: %;
  margin: 0 auto;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Simone Livraghi Photographer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="column c20">

    <header>Header c20</header>

    <section>
      <div class="vertical-menu">

        <a href="#">Logo</a>
        <a href="#">Home</a>
        <a href="#">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

      </div>
    </section>



    <footer>Footer c20</footer>

  </div>

  <div class="column c80">

    <header>Header c80</header>

    <section>



    </section>

    <footer>Footer c80</footer>

  </div>


</body>

</html>

【问题讨论】：

标签： html css layout grid centering

【解决方案1】：

你应该给侧边菜单栏一个固定宽度，在某个断点它会放错地方，但现在它在调整大小后也显示在完美位置

【讨论】：

【解决方案2】：

也许将margin:auto 添加到垂直菜单中的每个项目会有所帮助：

.vertical-menu a {
color: black;
display: block;
padding: 15px 0;
text-decoration: none;
text-align: center;
width: 100%;
margin: auto;
}

【讨论】：