如何在 DIV 空间不足但保持 DIV 居中时显示滚动条？

Question

我想创建一个居中表格。

HTML:

<div id="profileContainer”>…</div>

CSS:

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

问题是当屏幕垂直变短时，部分表单被隐藏，并且没有滚动条显示以使其可访问：JSFiddle。

问题：

当单独的垂直 space 不够时，如何让滚动条出现，但当足够时，让我的 div 水平和垂直居中space?

Answer 1

您应该将位置更改为绝对位置。

更新

为这 3 个更改 #profileContainer：

position: absolute;
top: 0;
left: 0;

删除：

-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

更新

看看你如何居中元素：

#container {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #000;
}
#cell {
  display: table-cell;
  vertical-align: middle;
  background: #ff0000;
}
#profileContainer {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background: #fff;
}

<div id="container">
  <div id="cell">
    <div id="profileContainer">
      <h2>Profile Information</h2>
      <p>Form</p>
    </div>
  </div>
</div>

Answer 2

我会像这样更改 #profileContainer 的 CSS 规则：

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 90%;
    max-width: 760px;
    display: block;
    position: relative;
    margin: 30px auto 0;
}

position: relative 而不是 fixed，少了 width，因为 100% 加上 padding 超过了容器宽度。 margin: 0 auto 水平居中，而不是 left: 50% 和 transformX(-50%)。修复了 margin top 而不是垂直居中以避免您描述的效果。

Fiddle: http://jsfiddle.net/qacv17gq/1/

补充：除了 javascript/jQuery 你将无法将容器垂直居中和当 window/screen 高度小于容器的高度。

Answer 3

这可以通过 flexbox 轻松实现，只需从 #profileContainer 中删除所有定位并将以下规则添加到 body:

display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

前三个规则将居中 #profileContainer，而最后一个规则确保正文始终至少是视图的整个高度。

JSFiddle 没有正确显示最后一条规则，您的示例太大而无法将其嵌入此处，所以我 moved it over to codepen.

附带说明一下，您在关闭 main 之前有一个额外的结束 div 标记。

Answer 4

将此添加到元素的样式中。

#profileContainer {
    overflow: scroll;
}

此外，尝试将您的内容嵌套在 div#profileContainer 中的 div 之间，以防它不起作用。

Answer 5

我觉得如果你像下面这样修改#profileContainer样式就可以达到你想要的效果：

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px;
    width: 100%;
    max-width: 760px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: scroll;
    overflow-x: hidden;
    max-height: 70vh;
 }

我做了两件事，首先是添加垂直滚动，其次是指定#profileContainer 可以采用的最大高度，即 70vh，即视口高度的 70%。您可以根据需要进行调整。

Answer 6

我认为这就是您正在寻找的答案...只需阅读这段代码如果您有任何疑问，请问我

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>   
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
   <div id="profileContainer" class="container-fulid">
   <div class="col-md-8 col-xs-8 col-xs-offset-2 col-md-offset-2" style="border:1px solid #000;padding:0px;border-radius:4px">
    <header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
        </div>
        <div id="rightNavSection" style="color:#fff">
  Logged in as Dave A 
  
  <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
 </div>
    </div>
  </div>
</nav>


    </header>
    <main role="main" class="container-fulid">

<!-- User's profile --> 
<div id="profile" >
<div class="col-lg-12">
<div class="col-md-8 col-md-offset-2">

    <h2>Profile Information</h2>
    <form class="edit_user" id="edit_user_38" action="/users/38" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="wh3mbAtBBAMrOqPUdqGMY5aHns3EZ/tVQDRHhcA1A2ZqXKgDE+VKG7Gj/NyjySKngvorjjq8rVMc/n8LOE4Pgg==" />

      <div class="profileField">
       <label for="user_first_name">First name</label><br/>
       <div class="field"><input size="20" class="textField form-control" type="text" value="Dave" name="user[first_name]" id="user_first_name" style="width:50%"/></div>
      </div>

      <div class="profileField">
       <label for="user_last_name">Last name</label><br/>
       <div class="field"><input size="20" class="textField form-control" type="text" value="A" name="user[last_name]" id="user_last_name" style="width:50%"/></div>
      </div>

      <div class="profileField">
       Birthday<br/>
  <div class="col-lg-4">
       <select id="user_dob_2i" name="user[dob(2i)]" class="form-control">
  
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_3i" name="user[dob(3i)]" class="form-control">
<option value="">Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-lg-4">
<select id="user_dob_1i" name="user[dob(1i)]" class="form-control">
<option value="">Select Year</option>
<option value="1900">1900</option>
<option value="1901">1901</option>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
<option value="1907">1907</option>
<option value="1908">1908</option>
<option value="1909">1909</option>
<option value="1910">1910</option>
<option value="1911">1911</option>
<option value="1912">1912</option>
<option value="1913">1913</option>
<option value="1914">1914</option>
<option value="1915">1915</option>
<option value="1916">1916</option>
<option value="1917">1917</option>
<option value="1918">1918</option>
<option value="1919">1919</option>
<option value="1920">1920</option>
<option value="1921">1921</option>
<option value="1922">1922</option>
<option value="1923">1923</option>
<option value="1924">1924</option>
<option value="1925">1925</option>
<option value="1926">1926</option>
<option value="1927">1927</option>
<option value="1928">1928</option>
<option value="1929">1929</option>
<option value="1930">1930</option>
<option value="1931">1931</option>
<option value="1932">1932</option>
<option value="1933">1933</option>
<option value="1934">1934</option>
<option value="1935">1935</option>
<option value="1936">1936</option>
<option value="1937">1937</option>
<option value="1938">1938</option>
<option value="1939">1939</option>
<option value="1940">1940</option>
<option value="1941">1941</option>
<option value="1942">1942</option>
<option value="1943">1943</option>
<option value="1944">1944</option>
<option value="1945">1945</option>
<option value="1946">1946</option>
<option value="1947">1947</option>
<option value="1948">1948</option>
<option value="1949">1949</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>

      </div>

      <div class="profileField address">
       
       <label for="user_address_attributes_address">Home Town</label><br/>
  <div class="col-lg-4">
       <div class="field"><input placeholder="City" class="textField form-control" type="text" name="user[address_attributes][city]" id="user_address_attributes_city" /></div>
  </div>
  <div class="col-lg-4">
       <select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"><option value="">Select State</option>

<option value="3526">Alabama</option>
<option value="3556">Alaska</option>
<option value="3547">Arizona</option>
<option value="3510">Arkansas</option>
<option value="3542">California</option>
<option value="3543">Colorado</option>
<option value="3527">Connecticut</option>
<option value="3512">Delaware</option>
<option value="3513">Florida</option>
<option value="3514">Georgia</option>
<option value="3555">Hawaii</option>
<option value="3548">Idaho</option>
<option value="3529">Illinois</option>
<option value="3530">Indiana</option>
<option value="3528">Iowa</option>
<option value="3515">Kansas</option>
<option value="3557">Kentucky</option>
<option value="3516">Louisiana</option>
<option value="3531">Maine</option>
<option value="3517">Maryland</option>
<option value="3558">Massachusetts</option>
<option value="3532">Michigan</option>
<option value="3533">Minnesota</option>
<option value="3519">Mississippi</option>
<option value="3518">Missouri</option>
<option value="3549">Montana</option>
<option value="3534">Nebraska</option>
<option value="3545">Nevada</option>
<option value="3535">New Hampshire</option>
<option value="3536">New Jersey</option>
<option value="3544">New Mexico</option>
<option value="3537">New York</option>
<option value="3520">North Carolina</option>
<option value="3550">North Dakota</option>
<option value="3538">Ohio</option>
<option value="3521">Oklahoma</option>
<option value="3551">Oregon</option>
<option value="3559">Pennsylvania</option>
<option value="3539">Rhode Island</option>
<option value="3522">South Carolina</option>
<option value="3552">South Dakota</option>
<option value="3523">Tennessee</option>
<option value="3524">Texas</option>
<option value="3546">Utah</option>
<option value="3540">Vermont</option>
<option value="3560">Virginia</option>
<option value="3553">Washington</option>
<option value="3511">Washington, D.C.</option>
<option value="3525">West Virginia</option>
<option value="3541">Wisconsin</option>
<option value="3554">Wyoming</option></select>
</div>
<div class="col-lg-4">
        <select id='user[address]_country_id' name='user[address][country_id]' class="form-control">
<option value="0">-- Select --</option><option value="38">Canada</option><option value="233" selected>United States</option><option value="0" disabled="disabled">----------------------------</option><option value="3">Afghanistan</option>
<option value="15">Aland Islands</option>
<option value="6">Albania</option>
<option value="62">Algeria</option>
<option value="11">American Samoa</option>
<option value="1">Andorra</option>
<option value="8">Angola</option>
<option value="5">Anguilla</option>
<option value="9">Antarctica</option>
<option value="4">Antigua and Barbuda</option>
<option value="10">Argentina</option>
<option value="7">Armenia</option>
<option value="14">Aruba</option>
<option value="13">Australia</option>
<option value="12">Austria</option>
<option value="16">Azerbaijan</option>
<option value="32">Bahamas</option>
<option value="23">Bahrain</option>
<option value="19">Bangladesh</option>
<option value="18">Barbados</option>
<option value="36">Belarus</option>
<option value="20">Belgium</option>
<option value="37">Belize</option>
<option value="25">Benin</option>
<option value="27">Bermuda</option>
<option value="33">Bhutan</option>
<option value="29">Bolivia</option>
<option value="30">Bonaire, Saint Eustatius and Saba </option>
<option value="17">Bosnia and Herzegovina</option>
<option value="35">Botswana</option>
<option value="34">Bouvet Island</option>
<option value="31">Brazil</option>
<option value="106">British Indian Ocean Territory</option>
<option value="239">British Virgin Islands</option>
<option value="28">Brunei</option>
<option value="22">Bulgaria</option>
<option value="21">Burkina Faso</option>
<option value="24">Burundi</option>
<option value="117">Cambodia</option>
<option value="47">Cameroon</option>
<option value="38">Canada</option>
<option value="52">Cape Verde</option>
<option value="125">Cayman Islands</option>
<option value="41">Central African Republic</option>
<option value="215">Chad</option>
<option value="46">Chile</option>
<option value="48">China</option>
<option value="54">Christmas Island</option>
<option value="39">Cocos Islands</option>
<option value="49">Colombia</option>
<option value="119">Comoros</option>
<option value="45">Cook Islands</option>
<option value="50">Costa Rica</option>
<option value="98">Croatia</option>
<option value="51">Cuba</option>
<option value="53">Curacao</option>
<option value="55">Cyprus</option>
<option value="56">Czech Republic</option>
<option value="40">Democratic Republic of the Congo</option>
<option value="59">Denmark</option>
<option value="58">Djibouti</option>
<option value="60">Dominica</option>
<option value="61">Dominican Republic</option>
<option value="221">East Timor</option>
<option value="63">Ecuador</option>
<option value="65">Egypt</option>
<option value="210">El Salvador</option>
<option value="88">Equatorial Guinea</option>
<option value="67">Eritrea</option>
<option value="64">Estonia</option>
<option value="69">Ethiopia</option>
<option value="72">Falkland Islands</option>
<option value="74">Faroe Islands</option>
<option value="71">Fiji</option>
<option value="70">Finland</option>
<option value="75">France</option>
<option value="80">French Guiana</option>
<option value="176">French Polynesia</option>
<option value="216">French Southern Territories</option>
<option value="76">Gabon</option>
<option value="85">Gambia</option>
<option value="79">Georgia</option>
<option value="57">Germany</option>
<option value="82">Ghana</option>
<option value="83">Gibraltar</option>
<option value="89">Greece</option>
<option value="84">Greenland</option>
<option value="78">Grenada</option>
<option value="87">Guadeloupe</option>
<option value="92">Guam</option>
<option value="91">Guatemala</option>
<option value="81">Guernsey</option>
<option value="86">Guinea</option>
<option value="93">Guinea-Bissau</option>
<option value="94">Guyana</option>
<option value="99">Haiti</option>
<option value="96">Heard Island and McDonald Islands</option>
<option value="97">Honduras</option>
<option value="95">Hong Kong</option>
<option value="100">Hungary</option>
<option value="109">Iceland</option>
<option value="105">India</option>
<option value="101">Indonesia</option>
<option value="108">Iran</option>
<option value="107">Iraq</option>
<option value="102">Ireland</option>
<option value="104">Isle of Man</option>
<option value="103">Israel</option>
<option value="110">Italy</option>
<option value="44">Ivory Coast</option>
<option value="112">Jamaica</option>
<option value="114">Japan</option>
<option value="111">Jersey</option>
<option value="113">Jordan</option>
<option value="126">Kazakhstan</option>
<option value="115">Kenya</option>
<option value="118">Kiribati</option>
<option value="123">Kosovo</option>
<option value="124">Kuwait</option>
<option value="116">Kyrgyzstan</option>
<option value="127">Laos</option>
<option value="136">Latvia</option>
<option value="128">Lebanon</option>
<option value="133">Lesotho</option>
<option value="132">Liberia</option>
<option value="137">Libya</option>
<option value="130">Liechtenstein</option>
<option value="134">Lithuania</option>
<option value="135">Luxembourg</option>
<option value="149">Macao</option>
<option value="145">Macedonia</option>
<option value="143">Madagascar</option>
<option value="157">Malawi</option>
<option value="159">Malaysia</option>
<option value="156">Maldives</option>
<option value="146">Mali</option>
<option value="154">Malta</option>
<option value="144">Marshall Islands</option>
<option value="151">Martinique</option>
<option value="152">Mauritania</option>
<option value="155">Mauritius</option>
<option value="246">Mayotte</option>
<option value="158">Mexico</option>
<option value="73">Micronesia</option>
<option value="140">Moldova</option>
<option value="139">Monaco</option>
<option value="148">Mongolia</option>
<option value="141">Montenegro</option>
<option value="153">Montserrat</option>
<option value="138">Morocco</option>
<option value="160">Mozambique</option>
<option value="147">Myanmar</option>
<option value="161">Namibia</option>
<option value="170">Nauru</option>
<option value="169">Nepal</option>
<option value="167">Netherlands</option>
<option value="251">Netherlands Antilles</option>
<option value="162">New Caledonia</option>
<option value="172">New Zealand</option>
<option value="166">Nicaragua</option>
<option value="163">Niger</option>
<option value="165">Nigeria</option>
<option value="171">Niue</option>
<option value="164">Norfolk Island</option>
<option value="121">North Korea</option>
<option value="150">Northern Mariana Islands</option>
<option value="168">Norway</option>
<option value="173">Oman</option>
<option value="179">Pakistan</option>
<option value="186">Palau</option>
<option value="184">Palestinian Territory</option>
<option value="174">Panama</option>
<option value="177">Papua New Guinea</option>
<option value="187">Paraguay</option>
<option value="175">Peru</option>
<option value="178">Philippines</option>
<option value="182">Pitcairn</option>
<option value="180">Poland</option>
<option value="185">Portugal</option>
<option value="183">Puerto Rico</option>
<option value="188">Qatar</option>
<option value="42">Republic of the Congo</option>
<option value="189">Reunion</option>
<option value="190">Romania</option>
<option value="192">Russia</option>
<option value="193">Rwanda</option>
<option value="26">Saint Barthelemy</option>
<option value="200">Saint Helena</option>
<option value="120">Saint Kitts and Nevis</option>
<option value="129">Saint Lucia</option>
<option value="142">Saint Martin</option>
<option value="181">Saint Pierre and Miquelon</option>
<option value="237">Saint Vincent and the Grenadines</option>
<option value="244">Samoa</option>
<option value="205">San Marino</option>
<option value="209">Sao Tome and Principe</option>
<option value="194">Saudi Arabia</option>
<option value="206">Senegal</option>
<option value="191">Serbia</option>
<option value="250">Serbia and Montenegro</option>
<option value="196">Seychelles</option>
<option value="204">Sierra Leone</option>
<option value="199">Singapore</option>
<option value="211">Sint Maarten</option>
<option value="203">Slovakia</option>
<option value="201">Slovenia</option>
<option value="195">Solomon Islands</option>
<option value="207">Somalia</option>
<option value="247">South Africa</option>
<option value="90">South Georgia and the South Sandwich Islands</option>
<option value="122">South Korea</option>
<option value="68">Spain</option>
<option value="131">Sri Lanka</option>
<option value="197">Sudan</option>
<option value="208">Suriname</option>
<option value="202">Svalbard and Jan Mayen</option>
<option value="213">Swaziland</option>
<option value="198">Sweden</option>
<option value="43">Switzerland</option>
<option value="212">Syria</option>
<option value="228">Taiwan</option>
<option value="219">Tajikistan</option>
<option value="229">Tanzania</option>
<option value="218">Thailand</option>
<option value="217">Togo</option>
<option value="220">Tokelau</option>
<option value="224">Tonga</option>
<option value="226">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="225">Turkey</option>
<option value="222">Turkmenistan</option>
<option value="214">Turks and Caicos Islands</option>
<option value="227">Tuvalu</option>
<option value="240">U.S. Virgin Islands</option>
<option value="231">Uganda</option>
<option value="230">Ukraine</option>
<option value="2">United Arab Emirates</option>
<option value="77">United Kingdom</option>
<option selected="selected" value="233">United States</option>
<option value="232">United States Minor Outlying Islands</option>
<option value="234">Uruguay</option>
<option value="235">Uzbekistan</option>
<option value="242">Vanuatu</option>
<option value="236">Vatican</option>
<option value="238">Venezuela</option>
<option value="241">Vietnam</option>
<option value="243">Wallis and Futuna</option>
<option value="66">Western Sahara</option>
<option value="245">Yemen</option>
<option value="248">Zambia</option>
<option value="249">Zimbabwe</option></select>
</div>
      </div>

      <div class="profileField">
 <label for="user_automatic_import">
   <input name="user[automatic_import]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[automatic_import]" id="user_automatic_import" />
   Automatically Save Results Matching My Name, Age, and Home Town
</label>      </div>

      <div class="profileField" style="margin:10px 0px;">
        <span class="buttonContainer"><a class="btn btn-danger" data-no-turbolink="true" href="/races/index">Cancel</a></span>
        <span class="buttonContainer"><input type="submit" name="commit" value="Save" method="put" class="btn btn-success" /></span>
      </div>
</form>
</div>
</div>
    
    </main>
    </div> 
 </div>
 </body>
 </html>

Answer 7

您可以添加这个 css 的：

#profileContainer {overflow:auto; max-height:100%;}
html, body {height:100%; margin:0;}

JSFIDDLE

Answer 8

各位，2016 年了！是时候开始依靠 CSS Flexbox 来集中我们的元素并退休我们心爱的 translate(-50%, -50%) hack 了。

CodePen

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#profileContainer {
    width: 760px;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: scroll;
}

<body> 作为我们的 flex 容器。 justify-content: center 和 align-items: center 将使表格居中。 max-width 和 max-height 将防止表单超出 window.

的边界

不需要 position！

Answer 9

给你...这是一个跨浏览器的解决方案，无处不在，经过验证和测试，纯 css，无 js，干净的解决方案。

我已经在顶部添加了必要的代码并注释掉了您的主要元素所需的内容。

我将所有内容都包装在 table / table-cell 包装器中（样式如下）

<div class="profile-wrapper">
  <div>
    (..your elem)
  </div>
</div>

然后将它们设置如下样式：

html, body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
.profile-wrapper {
  display:table;
  width:100%;
  height:100%;
}
.profile-wrapper > div {
  display:table-cell;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
}

Html 和主体元素必须给予 height:100% 才能达到要求。

它的作用是创建一个 table - 里面的 table-cell - 占据了整个屏幕。然后使用 text-align:center 和 vertical-align:middle 将任何 display:inline-block 元素水平和垂直居中。由于 table 会根据内容自动扩展，如果您的元素大于 table 单元格尺寸，则会出现滚动条。

这是您更新后的 fiddle。

http://jsfiddle.net/c9btschs/1/

Answer 10

添加以下 CSS 属性以及 #profileContainer

  max-height: 85%;
  overflow: auto;

这只会在内容溢出时为您提供滚动条，85% 可确保UI 在所有屏幕上响应迅速且美观

JSFiddle Working Example

Answer 11

你只需要更改配置文件容器的样式：

#profileContainer {
    border-radius: 25px;
    background: #ffffff;
    padding: 10px 2%;
    width: 96%;
    max-width: 760px;
    margin: 0 auto;
}

试试这个 http://jsfiddle.net/kiroslim/tcou4dk3/10/！

如何在 DIV 空间不足但保持 DIV 居中时显示滚动条？

How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

html

css

scroll

center

scrollbars

问题：