1.1使用單元格的方法，將父元素設為display:table-cell,通過設定text-align：center實現元素的水平居中，設定vertical-align：middle實現子元素的垂直居中；對於子元素，則需要設定display: inline-block，這就可以將它轉為內聯塊元素了.
1.2使用flex布局的方法，將父元素設定display: flex; justify-content: center（水平居中）; align-items: center（垂直居中）;這樣就可以實現子元素水平方向和垂直方向居中了。
1.3通過flex布局實現還有另外一種方法，具體為：將父元素設定為：display: flex;子元素設定為：margin:auto;這種方法也可以實現相同的效果。
1.4通過定位的方法，具體為：將父元素設定為相對定位：position: relative;子元素設定為絕對定位： position:absolute;
接下來再對子元素實現移位，其中一種方法可以為：
left: 50%;
top:50%;
transform:translate(-50%,-50%);
其中通過設定left和top可以實現元素左頂點在父容器的正中心，然後再通過分別向左和向上移動子元素自身寬度和高度的一半就可以剛好實現居中，具體的實現是 transform:translate(-50%,-50%);這一技巧比較巧妙！
1.5使用css grid 布局，這種方面多使用於二維的情況，但同樣也可以實現子元素的居中效果，具體操作為：將父元素設定為 display: grid;子元素設定為：justify-self: center（水平居中）; align-self: center; （垂直居中）
1.單元格
2.flex
3.flex
4.定位
5.css grid
元素垂直居中和水平居中
在此之前先要設定好高度和寬度 要是單行資料 垂直居中 1 可以用傳統的line height和height相等就可以 2 使用vertical align middle 此時該元素的display要設定為table cell，並且子元素必須是行級元素才可以。水平居中 1 text align cen...
水平居中和垂直居中
行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...
元素水平居中和垂直居中的方式
關於居中的問題，一直處於疑惑不解的狀態，知道的幾種方法好像也不是每一次都會起到作用，所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法，所以，整理了一些方法，梳理一下思路，做乙個總結。對於單行文字，可以設定它的行高等於它父容器的高度，這樣就實現了該文字的垂直居中，但是此方法只適用於單行文字。...