本文介紹的方法種類不太全，因為筆者只想分享用過的、通用性高並且簡便易用的。
.blue
.yellow
.element
.mainer
/* * 使用 flex 中 水平軸 和 相對軸 居中的布局方式實現子檔案的水平與垂直居中。
.blue
.yellow
.element
/* * 關鍵點： 父元素使用 relative + 子元素 absolute 完成基本定位布局、
* + left，top 將子元素移動到居中偏右下的位置，此時子元素位置處於（600/2+200/2,600/2+200/2)，也就是父元素+子元素寬高再除以二的位置。
* + transform: translate(-50%,-50%) 將子元素向左向上偏移（200/2,200/2）的距離，到達整個父容器的中點。（初學者會用即可）
* 此方法適用於 子元素寬高未知的情況下。筆者推崇。
*/.mainer
.box
.container
.container:after
.dialog {
display: inline-block;
vertical-align: middle;
font-size: 14px;
white-space:normal
關於水平垂直居中的幾種方式
1.如果要設定某個元素在窗體中水平垂直居中的話，將此元素設定為絕對定位 不設定其祖先為相對定位，讓其預設針對窗體定位 然後設定元素的margin值為auto,在設定定位的上下左右都為0,即可實現此元素在窗體中水平垂直居中。如 margin auto position absolute top 0 b...
CSS實現垂直水平居中的幾種方式
container是指外邊大盒子，center是指需要居中的小盒子，第一種方式 container寬高已知和container高已知的情況下 第一種 container center container寬高已知 直接通過最簡單的margin，先讓他右移container的一半，再左移自己的一半，垂直...
關於css垂直水平居中的幾種方式
css中元素的垂直水平居中是比較常見及較常使用的，在這裡向大家介紹一下幾種方式。margin 0 auto 效果圖 而文字的垂直水平居中也比較簡單，加上line height 200px 與text align center 即可。test 效果圖 相對於文字來講，元素的垂直水平居中就沒這麼簡單，因...