CSS水平垂直居中常見方法總結

當然最好使的是：

margin: 0 auto;

1、元素沒有設定寬度，沒有寬度怎麼居中！ 

2、設定了寬度依然不好使，你設定的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換為塊元素請看我的另一篇文章！ 

示例 1：

class="box">

class="content">
哇!居中了
div>
div>
type="text/css">
.box
.content
style>

2、元素水平垂直居中

父元素設定為：position: relative; 

子元素設定為：position: absolute; 

距上50%，據左50%，然後減去元素自身寬度的距離就可以實現 

示例 2：

class="box">

class="content">

div>

div>

.box

.content

方案2：position transform 元素未知寬度

如果元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換為：transform: translate(-50%,-50%);

效果如上！ 

示例 3：

class="box">

class="content">

div>

div>

.box

.content

方案3：flex布局

示例 4：

"box"

>
"content"
>
.box 
.content

示例 5： 

因為table-cell相當與**的td，td為行內元素，無法設定寬和高，所以巢狀一層，巢狀一層必須設定display: inline-block;td的背景覆蓋了橘黃色，不推薦使用

"box"

>
"content"
>
"inner"
>
.box 
.content 
.inner

CSS水平垂直居中常見方法總結

1 元素水平居中 當然最好使的是 margin 0 auto 居中不好使的原因 1 元素沒有設定寬度，沒有寬度怎麼居中嘛！2 設定了寬度依然不好使，你設定的是行內元素吧，行內元素和塊元素的區別以及如何將行內元素轉換為塊元素請看我的另一篇文章！示例 1 class box class content ...

css實現水平居中和垂直居中的常見方式

我們在實際工作中常會遇到需要設定居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。水平居中 行內元素 text align center 這個比較簡單 塊狀元素 定寬的塊狀元素通過設定左右margin為auto實現，例如margin 10px auto...

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...