彙總各種垂直居中
一.子元素定寬高
1.給父元素相對定位position:relative，
子元素設定絕對定位position:absolute;top:0;left:0;right:0;bottom:0;
子元素position:absolute;left:calc(50% - 子元素寬度/2);top:calc(50% - 子元素高度/2);
子元素position:absolute;left:50%;top:50%;translatex(-子元素寬度/2);translatey(-子元素高度/2);
2.子元素不定寬高
彈性盒模型 父元素display:flex;align-item:center;justify-content:center;
給父元素相對定位position:relative，子元素 position:absolute;transform:translate(-50%,-50%);
3.父元素寬高不確定，或者為當前瀏覽器高度時（用js設定，曾經做專案遇到過這個小坑）
假設.login是子元素的類名
$('.login').css()
css各種水平垂直居中
css各種水平垂直居中，網上查了一下，總結以下幾種 line height垂直居中 缺點，僅限於單行文字 item 效果 padding垂直居中 缺點，內容不確定時，高度不好固定 item 效果 margin垂直居中 需要知道父層和子層高度，然後marginleft margintop 父層 2 子...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...