Three-column layout and horizontal vertical Center Demol Example

HTML code

<!  DOCTYPE html>
 Full SCSS code 
 
*{margin:0; padding:0;}    html,body{width:100%; height:100%;}     $BGC: Rgba (0.43), @mixin Border-radius ($BGLC: #464646, $bdr: 3px) {border: ($BDR/4) solid $BGLC; Border-radius: $BDR;}    @mixin element-size ($width: Auto, $height: Auto) {width: $width; Height: $height;} $menuWidth: 50%; $mainWidth: 80%;.    contain{@include element-size ($mainWidth, 100%);    margin:0px Auto;        The following is the navigation bar. menu{width: $menuWidth;        margin:10px Auto;        List-style-type:none;        Background: $BGC;        @include Border-radius;            overflow:auto;//Clear Float 1//clear floating 2 &:after{content: ".";            width:0;            height:0;            Display:block;            Clear:both;            Visibility:hidden;        Zoom:1;        };            li{Float:left;            position:relative;            width:100px;            height:18px;            padding:10px;            border-right:1px solid #fff;       Text-align:center;     &:hover{Background:rgba (120, 120, 120, 1);                }. drop-menu{Display:none;                Position:absolute;                List-style-type:none;                left:-1px;                top:38px;                border:1px solid #464646;                    li{Float:none;                    Text-align:left;                     Border:none;                    &:hover{background: #cccccc;        }}}} a{Text-decoration:none;        }}. wrap{@include element-size (100%,100%);        Background: #dddddd;        position:relative;            . main{position:relative;            @include element-size (auto,100%);            background:red; margin:0            200px;                An unknown element is centered 1, and a parent element is added outside the child element. child{Position:absolute;                left:50%;          top:50%;      . center-content{@include Element-size (200px,200px);                    margin-top:-50%;                    margin-left:-50%;                Background: #333;            }}}. left{Position:absolute;            left:0;            top:0;            @include element-size (200px,100%);            Background:blue;                #demo {display:table;                @include element-size (100%,100%);                Text-align:center;                    p{Display:table-cell;                    Vertical-align:middle;                Background: #eee;            }}}. right{Position:absolute;            right:0;            top:0;            @include element-size (200px,100%);             Background:green;                Unknown Big boy element centered--using Inline-block. father{@include element-size (100%,100%);              Text-align:center;  &:after{Display:inline-block;                    @include element-size (0,100%);                    Vertical-align:middle;                Content: "";                    }. child{Display:inline-block;                    @include element-size (100px,100px);                    Background: #333;                Vertical-align:middle;        }}}}//Three column layout style, left and right fixed width, middle adaptive. wrap1{border-top:3px solid yellow;        @include element-size (100%,40%);        Background: #dddddd;            . main{@include Element-size (100%,100%);            Float:left;                . child{@include Element-size (auto,100%);                background:red; margin:0            200px;            }}. left{float:left;            margin-left:-100%;            @include element-size (200px,100%);        Background:blue;  }. right{Float:left;          margin-left:-200px;            @include element-size (200px,100%);        Background:green;        }}//middle column fixed, left and right bar adaptive #left, #right {float:left;        margin:0 0 0-271px;        width:50%;        *width:49.9%;//compatible with IE} #main {width:540px;        Float:left;    Background:green;    }. inner {padding:20px;        } #left. Inner, #right. Inner {margin:0 0 0 271px;    Background:orange; }}
 Three-column layout and horizontal vertical centering Demol example