css如何實現水平垂直居中?css 實現水平垂直居中的多種方式，下面我們就來聊聊關于css如何實現水平垂直居中?接下來我們就一起去了解一下吧!

css如何實現水平垂直居中

css 實現水平垂直居中的多種方式

這是一道面試必考題，很多面試官都喜歡問這個問題，要想實現這種效果看似簡單，實則暗藏玄機。

為了實現如下效果先來做些準備工作,假設HTML代碼如下：

<div class="wp"> <div class="box size"></div> </div> .wp{ border: 1px solid red; width: 300px; height: 300px; } .box{ background: green; } .box.size{ width: 100px; height: 100px; }

.size 表示居中元素是否定寬, 下面所有效果都會用到如上代碼，主要是設置顔色和寬高

• absolute 負margin
• absolute margin auto
• absolute calc (兼容問題)

1.1 absolute 負margin

絕對定位的百分比是相對于父元素的寬高

.wp{ position:relative; } .box{ position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }

1.2 absolute margin auto

.wp{ position: relative; } .box{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

1.3 absolute calc

感謝css3帶來了計算屬性，既然top的百分比是基于元素的左上角，那麼 在減去寬度的一半就好了

這種方法兼容性依賴calc的兼容性

.wp{ position: relative; } .box{ position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); }

• absolute transform
• lineheight
• writing-mode
• table
• css-table
• flex
• grid

2.1 absolute transform

修複絕對定位的問題，還可以使用css3新增的transform,transform的translate屬性也可以設置百分比，其實相對于自身的寬和高，所以可以将translate設置為-50%就可以做到居中了

.wp{ position: relative; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

2.2 lineheight

将box設置為行内元素，通過`text-align`就可以做到水平居中,通過`vertical-align`就可以實現垂直居中

.wp{ line-height: 300px; text-align: center; font-size: 0px; } .box{ font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; // 修正文字對齊方式 }

2.3 writing-mode

writing-mode可以改變文字的顯示方向

所有水平方向上的css屬性，都會變為垂直方向上的屬性，比如`text-align`,通過`writing-mode`和`text-align`就可以做到水平和垂直方向的居中了

<div class="wp"> <div class="wp-inner"> <div class="box">hello world</div> </div> </div> .wp{ writing-mode: vertical-lr; text-align: center; } .wp-inner{ writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%; } .box{ display: inline-block; margin: auto; text-align: left; }

2.4 table

<table> <tbody> <tr> <td class="wp"> <div class="box">hello world</div> </td> </tr> </tbody> </table> // table 單元格中的内容天然就是垂直居中的，隻需要添加一個水平劇中屬性就可以了 .wp{ text-align: center; } .box{ display: inline-block; }

2.5 css-table

<div class="wp"> <div class="box">hello world</div> </div> .wp{ display: table-cell; text-align: center; vertical-align: middle; } .box{ display: inline-block; }

2.6 flex

<div class="wp"> <div class="box">hello world</div> </div> .wp{ display: flex; justify-content: center; align-items: center; }

2.7 grid

<div class="wp"> <div class="box">hello world</div> </div> .wp{ display: grid; } .box{ align-self: center; justify-self: center; }

對比各個方式的優缺點，簡單總結下：

• PC端有兼容性要求，寬高固定，推薦absolute 負margin
• PC端遊兼容性要求,寬高不固定,推薦css-table
• PC 端無兼容性要求,推薦flex
• 移動端推薦使用flex

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!