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 (js
Except for dynamic computing settings ).
transform
Browser 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-box3
Is 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-align
Vertical 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