第2題：調動記憶的css題
（當時真是把什麼**元素、文字元素這些都湊五個寫上去了，而且捲麵還寫的很亂。）
其實這些上網搜搜一大堆，只不過之前沒有注意總結。以下貼個靠譜的方案。已經經過了本人的測試。
css水平居中+垂直居中+水平/垂直居中的方法總結 - 半夏半暖半傾城的部落格 - csdn部落格
這個博主總結得相當全面了！但是還是要自己再次整理為適合自己記憶的結構方式。
首先科普一下：
行內元素
常見的有比如有：、、、、
(1)設定寬高無效
(2)對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間
(3)不會自動進行換行
塊級元素
、
、、、等標題
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標籤寫在一起，預設排列方式為從上至下
行內塊級元素
通過display:inline-block;進行轉換
(1)不自動換行
(2)能夠識別寬高
(3)預設排列方式為從左到右
行內元素裡面不能巢狀塊級元素
行內塊級元素裡面可以巢狀塊級元素
-行內元素：
1.使他的父級元素變成塊級元素display：block
2.水平居中：父級元素：text-align：center
3.垂直居中：
單行的行內元素：使元素高=父級元素的高
多行的行內元素：給父級元素設定display:table-cell;vertical-align: middle;
-塊級元素：
已知寬高
1.設定父元素相對定位、子元素絕對定位，
水平居中：right: 0; left: 0; margin: 0 auto;
垂直居中：top: 0; bottom: 0; margin: auto 0;
（可以合寫為）top: 0; bottom: 0; right: 0; left: 0; margin:auto;
2.設定父元素相對定位、子元素絕對定位，
水平居中：left: 50%;margin-left: -(元素寬度的一半)px;
垂直居中：top: 50%; margin-top: -(元素高度的一半)px;
（可以合寫為）left: 50%; top: 50%; margin-left: -(元素寬度的一半)px; margin-top: -(元素高度的一半)px;
未知寬高：
1.設定父元素為相對定位，給子元素設定絕對定位，
水平居中：left: 50%;translatex(-50%)
垂直居中：top: 50%; translatey(-50%);
（可以合寫為）left: 50%; top: 50%; transform: translatex(-50%) translatey(-50%);
2.把元素轉換為行內元素display: inline;display: inline-block;
水平居中：父元素設定text-align:center;
垂直居中：
單行的行內元素：使元素高=父級元素的高
多行的行內元素：給父級元素設定display:table-cell;vertical-align: middle;
寬高定不定均可：
1.flex布局：設定父元素為flex定位display:flex;
水平居中：justify-content: center;
垂直居中：align-items: center;
七種了……
後面還會有 記錄第一次面試——廣州凡科（三、四……），敬請期待
：
實現元素水平垂直居中的四種方法
一 使用 transform 與 position 結合 二 使用 position 定位和 偏移 屬性 三 使用 position 定位和 外邊距 屬性 四 使用 flex 彈性布局 主要利用transform屬性實現上下左右居中 css部分 demohtml部分 頁面效果展示 主要利用absol...
CSS實現元素水平 垂直居中的方法
首先，我們來了解水平居中,它有很多種方法，我們暫時先來了解其中的幾種 1.在實現方案中，我們最熟悉的莫過於給元素定義乙個寬度，然後使用margin body 這個是當我們的定義元素的寬度時顯現的，如果我們不能定義寬度時，該怎麼辦呢？2.我們對於定位也是常用的，在這裡當然也可以採用定位的方法來實現 b...
頑石系列 CSS實現垂直居中的五種方法
我們使用 vertical align middle 來實現元素垂直居中。我們可以把div的顯示方式設定為 從而使用 的vertical alignmiddle 屬性。width 200px height 200px background color aqua display table conte...