注意：這個方法對浮動元素或是絕對定位元素無效，這個元素要居中的前提條件是元素的寬度設定了，並且display屬性為block;(塊)，並且不能設定浮動，否則不起作用
只能對、按鈕、文字等行內元素進行水平居中（display:inline或display:inline-block等）
text-align 運用在塊級元素中，使其中的內容對齊。運用在塊級元素中 text-align 會使其包含行內元素對齊。
給父元素設定text-align這個屬性，只會對其子元素是行級元素或是行內塊元素起作用，且子元素會繼承text-align這個屬性應用在文字上。
把文字的 line-height 設為文字父容器的高度相同
適用於只有一行文字的情況。
使用html屬性 align=「center」 和 valign=「middle」 分別實現水平居中和垂直居中，**單元格裡面的內容就會水平垂直居中顯示；
使用css屬性 vertical-align:middle，css中沒有沒有專門設定**居中對齊的屬性。
使用 display:table-cell 來將元素模擬成為**單元格
** 注意：text-align:center;只在應對行內元素或是行內塊元素時有效。如果給p標籤設定了寬度和高度之後那麼就不會繼承text-align屬性。**
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)
在容器部分新增 justify-content:center；
設定容器部分為align-items：center，實現元素在彈性容器內的垂直居中
浮動居中的原理：
1、把浮動元素相對定位到父元素50%的位置（top:50%; left:50%;），這個時候元素並不是居中的，只是比實現居中的位置多出了自身一半的寬度；
2、需要裡面的子元素再用乙個相對定位，再把多出的自身的一半的寬度拉回來。
3、因為相對定位是相對自身來定位的，所以自身一半的寬度可以使用（left:50%;或是right:50%;）實現，用百分數所以就不需要知道元素的實際寬度是多少。
優點：使用浮動配合相對定位實現居中，可以不知道要居中元素的寬度，即使是這個寬度是不斷變化的也可以。
缺點：需要多餘的元素來包裹要居中的元素。
css 元素居中
水平居中 1.行內標籤 和行內塊級標籤可以設定 text algin center 2.塊級標籤 margin 0 auto 對浮動元素或絕對定位元素無效 不識別auto。3.浮動的元素 定位加left 50 transform translate 50 0 垂直居中 1.行內標籤 和行內塊級標籤可...
css 元素居中
元素有寬高 未知寬高 水平居中 1.margin 2.text align 3.position absolute和0 4.position absolute和負margin 5.translatex 6.flex 7.table cell 1.translatex 2.flex 3.table c...
css元素居中
css實現居中是面試中經常考的一道題目 元素固定寬高 元素不固定寬高 absolute 負margin fa.box style class fa class box div div absolute margin auto 通過設定各個方向的距離都是0，此時再講margin設為auto，就可以在各...