如何让滚动条出现在我的 DIV 上，同时使它在我的屏幕上居中？

Question

我正在设计一个无序列表的样式，其结构是

<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div>

选项通常比屏幕上显示的空间要多，这很好——通常有滚动方式。但是，当我添加一个 div 容器使所有内容居中时……

<div id="profileContainer">
<div class="profileField address">
<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div>
</div>
</div>

采用这种风格

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 100%;
    max-width: 720px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

但是现在没有办法滚动了。这是我的 JSFiddle -- https://jsfiddle.net/d2r50gc1/。我怎样才能让我的项目在屏幕中央居中，并且在无序列表上也有一个滚动条，这样我就可以看到所有的项目？

Answer 1

我刚刚更新了你的 jsfiddle

您只需将高度和溢出添加到您的#profileContainer

Update

希望对您有所帮助。

Answer 2

我想我已经完成了你想要的：https://jsfiddle.net/d2r50gc1/11/

您需要做的就是对无序列表应用一些样式：

ul.select-options {
    max-height: 15em;
    overflow-y: scroll;
    overflow-x: hidden;
}

通过使用 em（或 rem）单位而不是 px，您将保留对选择更改字体大小的用户的支持，我注意到您在另一个答案中表达了兴趣注释。您可以将 15em 这是一个任意选择的乘数更改为您认为合适的任何数字。您也可以考虑使用 rem 而不是 em，但您必须根据最终所需的用例自行做出决定。如果您将 padding 定义更改为也使用 em 或 rem，您可以使用数学将大小设置为始终在下拉列表中显示一定数量的元素。

Answer 3

这是您的JSFiddle关于您的要求。

.select {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-transform: translateX(calc(50% + 110px));
    transform: translateX(calc(50% + 110px));
}

描述

我向 .select class 添加了溢出，然后使用变换使其居中。希望这能满足您的需求。

Answer 4

现在添加第二个答案，我想我明白你的要求了。我真诚地鼓励您先查看我的其他答案，我认为您会发现它是一个更好的选择。

滚动 div.profileField Fiddle: https://jsfiddle.net/d2r50gc1/12/

实现如下CSS：

div.profileField {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box; 
}

Answer 5

你想达到这样的目的吗

.select-options{ height:60%; overflow-x: hidden;} Add this properties in same class

Demo

如何让滚动条出现在我的 DIV 上，同时使它在我的屏幕上居中？

How do I get a scroll bar to appear on my DIV while at the same time centering it on my screen?

html

css

center

scrollbar

html-lists