html - Why is translateY(-50%) needed to center an element which is at top: 50%? -


i can see code works align div vertically within parent element:

.element {   position: relative;   top: 50%;   transform: translatey(-50%); }

the question why? first thought parent element encompassed more viewport. made parent viewport height equal 100vh , width 100%. did not work. still needed translate or negative margin offset. why need negative offset when parent element set margin: 0;? because of computed margin i'm not taking account?

top:0 (default)

by default, element @ top of page, , top of element @ 0:

--------top of page-------- {element}   ------middle of  page------    ------bottom of  page------

top:50%

when move down 50% height (50% of entire page), top of element @ 50% mark, meaning element starts @ 50% , not centered.

--------top of page--------    ------middle of  page------ {element}   ------bottom of  page------

top:50%; transform:translatey(-50%);

when top of element @ halfway mark, can move element half of own height center whole page. that's transform:translatey(-50%); does:

--------top of page--------    {element}-middle of page---    ------bottom of  page------

but why can't top: 25% or that? i've made quick snippet show difference implementation:

body {    margin: 0;  }  .row {    display: flex;    justify-content: space-between;  }  .container {    display: inline-block;    margin: 5px;    width: 200px;    height: 200px;    background: tomato;  }  .inner {    position: relative;    margin: 0 auto;    height: 50%;    width: 50%;    background: #ffc4ba;  }  .inner.small {    width: 25%;    height: 25%;  }  .inner.big {    width: 75%;    height: 75%;  }  .percent {    top: 25%  }  .transform {    top: 50%;    transform: translatey(-50%);  }
<b>first row </b>looks alright, that's because gap works 25%  <div class="row">    <div class="container">      <div class="inner percent"></div>    </div>    <div class="container">      <div class="inner transform"></div>    </div>  </div>  <b>second row </b>made center square bit smaller, , 25% high we'd expect bottom of element reach 75%  <div class="row">    <div class="container">      <div class="small inner percent"></div>    </div>    <div class="container">      <div class="small inner transform"></div>    </div>  </div>  <b>third row </b>now i've made center box big , ends lower 75% making 25% start late  <div class="row">    <div class="container">      <div class="big inner percent"></div>    </div>    <div class="container">      <div class="big inner transform"></div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more