Css To Centralise A Html5 Div At The Bottom Of The Screen

Question

I have the following HTML5 document:

Solution 1:

In WinJS app for windows 8, you can use -ms-grid and -ms-flexbox to achieve this.

html:

<divclass="mypage fragment"><headeraria-label="Header content"role="banner"><buttonclass="win-backbutton"aria-label="Back"disabledtype="button"></button><h1class="titlearea win-type-ellipsis"><spanclass="pagetitle">My Page</span></h1></header><sectionrole="main"><canvasid="myCanvas"></canvas><divclass="ad-area-host"><divclass="ad-area"style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"data-win-control="MicrosoftNSJS.Advertising.AdControl"data-win-options="{applicationId: 'xyz', adUnitId: '123'}"></div></div></section></div>

css:

// some of the css for fragment and section[role=main] already exists in default.css.fragment 
{
    width: 100%;
    height: 100%;
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px1fr;
    display: -ms-grid;
}

.mypage.fragmentsection[role=main] 
{
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
}

.ad-area-host
{
    -ms-grid-row: 2;
    height: 90px;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-align: center;
}

I have not tested this. give it a try. the idea is to use grid to align ad-area-host at bottom. then, use -ms-flexbox display in ad-area-host div to center the ad-area.

Solution 2:

Do yo mean something like this?

.box {
    width:1024px;
    margin: 0px auto;
}
#adControl {   
    position:fixed;
    bottom:0;
    width: 728px; 
    height: 90px;
    border: solid 1px red; 
    visibility:visible;
}

Solution 3:

#adControl {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, 0);
    -ms-transform: translate( -50%, 0); 
    -webkit-transform: translate( -50%, 0);
}

Do you mean something like this?

Baca Juga

Solution 4:

Or do you mean something like this ?

#adControl {   
position: relative;
width: 728px;
margin: 0px auto;
top: 200px;
margin-top: 100px;
height: 90px;
border: solid 1px red;
visibility:visible
}

Solution 5:

You should actually remove float: left from the below div to make it in center.

Try this:

#adControl { 
      clear:left; 
      margin: 0px auto; 
 }

Html5 Dictionary