css居中的問題在實際中經常用到，但是居中方法之多，在不同的場景中用什麼方法，今天稍微的總結一下所有型別的居中問題。
1、水平居中（文字、鏈結）
此類只要在父級元素上加上
text-align: center;在有寬度的前提下，設定左右的margin為auto即可；
container大致有兩種可實現思路
使用flex彈性盒子布局（ safari不支援）
width: 500px;
height: 300px;
display: flex;
justify-content: center;
}.content
class="container">
class="content">div>
class="content">div>
class="content">div>
class="content">div>
div>
第二種方式將多個塊元素變為inline-block;是的轉化為單個的行內塊元素居中
width: 500px;
height: 300px;
text-align: center;
}.content
class="container">
class="content">div>
class="content">div>
class="content">div>
class="content">div>
div>
二、垂直居中的問題
單行文字顯示：height=line-height；即可
多行文字顯示
多行文字在**中是預設垂直居中的，這樣利用這一點可實現。父元素設定display: table;子元素設定table-cell;
.father
.children
.father
.children
還有一種雞賊的方法，使用偽類的方法達到垂直居中，思路就是使用偽類創造乙個空的元素，在用vertical-align:middle和inline-block併排的話，高度小的會相對高的垂直居中排放；
width: 300px;
height: 300px;
text-align: center;
}.container:before
.content
class="container">
class="content">這裡測試的文字文字div>
div>
三：塊狀元素
知道元素寬高
.father
.children
.parent
.child
也談CSS的水平居中，垂直居中
前端開發，凡是需要去寫頁面的同學 聽說有的公司，已經分化出有人寫js,有人寫頁面 都會遇到這個問題。因為最近在一天聊天聊到這個，除了常用的，所以這裡再次對相關問題做乙個梳理。水平居中 main center inline block屬性是無法讓元素水平居中，關鍵之處要在元 素的父容器中設定text ...
CSS 居中問題
text align center margin auto div height 100px line height 100px 使用插入table 包括tbody tr td 標籤，同時設定vertical align middle 看我是否可以居中 看我是否可以居中 看我是否可以居中 看我是否可...
CSS居中問題
1.左浮後，想居中 給他 爸爸 居中，如果沒有寬度，不能用 margin 0 auto 可以用text align center 2.繼1，如果 爸爸 也沒有確定的寬，想變窄 爸爸 只能也變成display inline block 3.把margin設為auto 具體來說就是把要居中的元素的mar...