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

Question

I want to create a centered form.

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%);
}

The problem is when the screen is vertically shorter, part of the form gets hidden, and no scrollbars appear to make it accessible: JSFiddle.

Question:

How do I get scrollbars to appear when vertical space alone is insufficient, but keep my div centered horizontally and vertically when there is enough space?

I don't want to set a fixed height on the DIV. I want the height to be the size of the elements within it and no larger. — Dave, Oct 02 '16 at 16:58
So if I well understand you just want to scroll the page and not the content of the div. — Franco, Oct 02 '16 at 17:01
Yes you are absolutely correct -- I'd like to be able to scroll the content of the page, which I can't seem to do in my current Fiddle. — Dave, Oct 02 '16 at 17:08
add these properties int your #profileContainer height:100vh; overflow:scroll, these your form would be equal to viewport height of any device and overflow:scroll — Arsalan Sheikh, Oct 11 '16 at 19:33
Updated your Fiddle with changes `max-height: 85%;` `overflow: auto;` http://jsfiddle.net/aspjsplayground/tcou4dk3/9/ — asp, Oct 12 '16 at 09:09

Johannes · Answer 1 · 2016-10-05T21:18:15.633

I would change the CSS rule for #profileContainer like this:

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

position: relative instead of fixed, less width, since 100% plus the padding exceeds the container width. margin: 0 auto to center horizontally instead of left: 50% and transformX(-50%). Fixed margin top instead of vertical centering to avoid the effect you describe.

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

Addition: Except with javascript/jQuery you won't be able to center a container vertically and not have parts of it hidden with no scrollbar when the window/screen height is less than the container's height.

I want to have my cake and eat it too so if it takes JS/JQuery to solve teh centering problem, I'm open to it. I would like to center things if there is enough space to do so. If not I'd like to be able to access all the elements. — Dave, Oct 06 '16 at 16:27

David Mann · Accepted Answer · 2016-10-06T16:40:43.910

2

This can easily be achieved with flexbox by simply removing all of the positioning from #profileContainer and adding the following rules to body:

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

The first three rules will center #profileContainer while the last one makes sure that the body will always be at least the full height of the view.

JSFiddle doesn't show the last rule correctly and your example is too big to embed it here, so I moved it over to codepen.

As a side note, you have an extra closing div tag just before you close main.

edited Oct 06 '16 at 16:40

answered Oct 06 '16 at 16:34

David Mann

2,074
1
17
17

Although flexbox is cool, browser support hasn't matured enough to be used at this day imho. Just my 2 cents. – scooterlord Oct 13 '16 at 12:22
[97 percent](http://caniuse.com/#feat=flexbox) is pretty well supported. While IE10/11 are buggy, the rules used here work just fine. – David Mann Oct 13 '16 at 14:30
To me, the weakest part here is the use of [viewport units (83 percent)](http://caniuse.com/#feat=viewport-units), though I still use them quite regularly. – David Mann Oct 13 '16 at 14:38
..it depends on your audience... from personal experience most users still use ie (even 8!) no matter what the stats say.. – scooterlord Oct 13 '16 at 15:49

score 2 · Answer 3 · answered Oct 11 '16 at 19:58

It's 2016, everyone! Time to start relying on CSS Flexbox to center our elements and retire our beloved 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;
}

The <body> serves as our flex container. justify-content: center and align-items: center will center the form. max-width and max-height will keep the form from exceeding the boundaries of the window.

No positioning needed!

score 1 · Answer 4 · answered Oct 11 '16 at 10:00

I think this is the answer you are looking for... Just go through this code If you have any query ask me

<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>

Hey @Dave if this answer worked for u then just accepted it close the bounty thanks. — aditya shrivastava, Oct 11 '16 at 18:55

Stoycho Trenchev · Answer 5 · 2016-10-03T17:51:13.940

0

You should change position to absolute.

Update

Change #profileContainer for those 3:

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

Remove:

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

Update

See how you center element:

#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>

edited Oct 03 '16 at 17:51

answered Oct 02 '16 at 17:50

Stoycho Trenchev

557
4
12

That doesn't work -- at least putting it where I think you intended -- http://jsfiddle.net/tcou4dk3/4/ . Note that after compressing the screen, you are not able to scroll up to the Log Out link. – Dave Oct 03 '16 at 13:54
THis doesn't work either. It breaks the premise of my question where I say, "and I wanted that area centered in the middle of my screen". – Dave Oct 03 '16 at 16:54

score 0 · Answer 6 · answered Oct 07 '16 at 13:26

0

Add this to the styling of the element.

#profileContainer {
    overflow: scroll;
}

Also, try to nest your content between a div inside the div#profileContainer, in case it doesn't work.

answered Oct 07 '16 at 13:26

Ferrius

69
8

score 0 · Answer 7 · answered Oct 08 '16 at 09:56

I think if you modify #profileContainer style like as follow then you can achieve the effect you want:

#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;
 }

I did two things, first is added an vertical scroll and second is specified the maximum height that the #profileContainer can take which is 70vh i.e. 70% of the view-port height. You can adjust it as per your needs.

score 0 · Answer 8 · answered Oct 11 '16 at 14:56

0

You could add this css's:

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

JSFIDDLE

answered Oct 11 '16 at 14:56

Alvaro Menéndez

8,766
3
37
57

score 0 · Answer 9 · answered Oct 11 '16 at 21:49

Here you are... this is a cross-browser solution, works everywhere, verified and tested, pure css, no-js, clean solution.

I have added the necessary code at the top and commented out what was needed to your main element.

I wrapped everything in a table / table-cell wrapper (styled below)

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

Then styled them as follows:

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 and body elements have to be given a height:100% to achieve what is requested.

What this does is it creates a table - and it's table-cell inside of it - that occupies the whole screen. Then using the text-align:center and vertical-align:middle you center both horizontally and vertically any display:inline-block element. Since tables expand automatically depending on the content, in case your element is larger than the table-cell dimensions, scrollbars occur..

Here is your updated fiddle.

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

asp · Answer 10 · 2016-10-12T09:20:57.810

0

Add following CSS properties along with the #profileContainer

  max-height: 85%;
  overflow: auto;

This will gives you a scrollbar only if the content is overflown, and the 85% ensures the UI responsive & good looking on all screens

JSFiddle Working Example

edited Oct 12 '16 at 09:20

answered Oct 12 '16 at 09:05

asp

743
2
9
29

score 0 · Answer 11 · answered Oct 12 '16 at 18:04

Yo need to just change the styles of your profile container:

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

Try this http://jsfiddle.net/kiroslim/tcou4dk3/10/!

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

Question:

11 Answers11