Summary of CSS vertical center method, css vertical center

Summary of CSS vertical center method, css vertical center
1. Use containers as table units

<Div class = "middle-demo1"> <button> button </button> </div>

. Middle-demo1 {display: table-cell; height: 100px; // The height can be dynamically changed, here is just a demo vertical-align: middle; border: 1px solid #666 ;}

Browser support:
Http://caniuse.com/#search=table-cell

2. Vertical center of fixed height Elements

<div class="middle-demo2">    <div class="g-box"></div></div>

. Middle-demo2 {position: relative; width: 200px; height: 200px; border: 1px solid #666 ;}. g-box {position: absolute; top: 50%; width: 100px; height: 100px; margin-top:-50px; background-color: deepskyblue;} Or. g-box {position: absolute; top: 50%; width: 100px; height: 100px;-webkit-transform: translateY (-50px);-moz-transform: translateY (-50px);-ms-transform: translateY (-50px);-o-transform: translateY (-50px); transform: translateY (-50px); background-color: deepskyblue ;}

Note:Elements to be vertically centered (g-box) Must be a fixed height (jsExcept for dynamic computing settings ).
transformBrowser support http://caniuse.com/#search=transform

3. Vertical center of fixed height Elements

<div class="middle-demo3">    <div class="g-box2"></div>    <div class="g-box3"></div></div>

g-box3Is the element that needs to be vertically centered

.middel-demo3{     position: relative;     width: 200px;     height: 200px;     border: 1px solid #666;}.g-box2{     height: 50%;     margin-bottom: -50px;}.g-box3{     height: 100px;     background-color: deepskyblue;}

Note:Elements to be vertically centered (g-box3) Must be a fixed height.

Iv. Vertical center of an indefinite height Element

<div class="middle-demo4">    <div class="g-box4"></div></div>

.middle-demo4{    position: relative;    width: 200px;    height: 200px;    border: 1px solid #666;}.g-box4{    position: absolute;    top: 0;    bottom: 0;    margin-top: auto;    margin-bottom: auto;    width: 100px;    height: 100px;    background-color: deepskyblue;}

Description: Elements to be vertically centered (g-box4) Can not be fixed height, browser supportIE8+, Better support for other browsers

5. Vertical center of single-line text

<Div class = "middle-demo5"> <span> Single Line Text </span> </div>

.middle-demo5{    height: 100px;    line-height: 100px;    border: 1px solid #666;}

Note:The block element is invalid.

6. The container is fixed to a height or variable height, and the multi-line text is vertically centered.

<Div class = "middle-demo6"> <p> Single Line Text </p> <p> multi-line text </p> </div>

. Middle-demo6 {display: table-cell; vertical-align: middle; height: 200px; // The container can be variable height, here just demonstrate border: 1px solid #666 ;}

VII,vertical-alignVertical center of elements in a row

<Div class = "middle-demo7"> <span class = "g-fix"> </span> <button class = "g-box7"> In-row elements </button> </div>

.middle-demo7{     position: relative;     width: 200px;     height: 200px;     border: 1px solid #666;}.g-fix{    display: inline-block;    width:0;    height: 100%;    vertical-align: middle;}

Note:Browser support overview http://caniuse.com/#search=inline-block