html - 如何将内容和粘性侧边栏分组到网页中心？

Question

我正在制作一个网站模型，我想要有内容和一个粘性侧边栏来跟随它。我希望它在所有尺寸的屏幕上都兼容，所以无论屏幕尺寸如何，我都希望它居中。

这是我与相关部分相关的 HTML:

<div class="sticky">
    <h2>Login</h2>
    <input type="text" placeholder="Username" id="username"> 
    <input type="password" placeholder="Password" id="password"> 
    <input type="submit" value="Login">
</div>

<div class = "content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
<div class = "content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
<div class = "content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
<div class = "content"><a href="#">Lorem</a>ipsum dolor sit amet</div>

还有 CSS:

.sticky{
position: sticky;
top: 45px;
display: inline-block;
float: right;
margin-right: 3%;
margin-top: 10px;
height:150px;
width:190px;    
border:1px solid black;
padding:10px;
}
.sticky input{
padding:5px;
margin:5px
}

.content{
    font-family: Verdana;
    width: 870px;
    padding: 4px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #E8E8E8;
    border-radius: 5px ;
    border-style: solid;
    border-color: black;
    border-width: 2px;  
}

.content a{
    color: orange;
    text-decoration: none;
}

那么我要如何“分组”它们才能使它们全部居中？

Answer 1

检查这个:

.sticky {
  position: sticky;
  top: 45px;
  float: none;
  margin: 10px auto 0 auto;
  height: 190px;
  width: 190px;
  border: 1px solid black;
  padding: 10px;
}

.sticky input {
  padding: 5px;
  margin: 5px
}

.content-container {
  //position: absolute;
  margin-top: 50px;
}

.content {
  font-family: Verdana;
  width: 98vw;
  padding: 4px;
  margin: 10px auto;
  background-color: #E8E8E8;
  border-radius: 5px;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  box-sizing: border-box;
}

.content a {
  color: orange;
  text-decoration: none;
}

<div class="sticky">
  <h2>Login</h2>
  <input type="text" placeholder="Username" id="username">
  <input type="password" placeholder="Password" id="password">
  <input type="submit" value="Login">
</div>
<div class="content-container">
  <div class="content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
  <div class="content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
  <div class="content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
  <div class="content"><a href="#">Lorem</a>ipsum dolor sit amet</div>
</div>

你确定 position: sticky 吗？这会有点奇怪。你可以在这里更好地看到它:https://jsfiddle.net/vtzgp6sb/1/你也可以试试这个:

.content-container {
  position: absolute;
  margin-top: 50px;
}