你的底線是bottom line？沒有人在觸碰你的底線啦！

?￣△￣)?

每天晚上一篇英語知識普及

英語罐頭

本文是我的第49篇英語知識文章

當你生氣或者與別人激烈討論的時候，你可能會說，That's my bottom line. （這是我的底線了，不能越過這線）。

然而，這說法并不正確，bottom line 并不是這個“底線”的意思哦！

一.bottom line可不是底線哦

一般來說，bottom line 和我們中文的“底線”有很多不同。bottom line主要來源于財務表格的盈虧情況，用于表明這個結果，因此，現在一般會引申為兩個意思:

1.關鍵因素

盈虧狀況，當然就是一個很關鍵的因素

The bottom line is that we need another one thousand dollars to complete the project.

關鍵是我們還需要1千美元才能完成項目。

2.最終結論

算了很多才出來的結果，所以盈虧狀況稱為最終結論也不為過

I won't sign the contract, and that's the bottom line.

我不會簽這個合同，這就是我最后要的。

那么中文的"底線"還要怎么表達呢？

其實非常簡單粗暴，所謂的底線，就是不能超越這條線，可以說是一個“極限”，因此，直接翻譯成limit 即可。

limit 底線，極限

Stop testing my limits!

別再考驗我的極限（底線）!

二.那些“線條”單詞

1.online 在線

這個詞相信大家都十分熟悉，online就是網絡在在線的意思，順便也普及一個詞匯：come online：上線，例如叫小伙伴一起開黑吃雞的時候，就可以用come online.

I just come online a while.

我只是上線一陣子。

2.on the line 冒險

在on line中間加冠詞“the”就會變成on the line，有冒險，處于危險的意思，可以理解為“命懸一線”。

Firefighters regularly put their lives on the line.

消防員經常會處于危險的境地當中。

3.in line 排隊

同樣是介詞，把on換成in就是in line，排隊的意思。

People are waiting in line to enter the hall.

人們有秩序地排隊等著進入大廳。

4.cut in line 插隊

隊伍被cut，被切斷，就是插隊的意思，所以加上cut。

Remember don't cut in line.

請記住千萬別插隊。

感謝大家的閱讀，我是罐頭菌

快樂英語學習，放眼全球資訊，歡迎關注英語罐頭

者｜顏海鏡

編輯｜覃云

出處丨前端之巔

本文已獲作者授權，轉載來源：

https://segmentfault.com/a/1190000016389031

劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題，我就被問過好幾次了。

要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下 CSS 實現水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個 github 倉庫在：https://github.com/yanhaijing/vertical-center

歡迎大家 star。

僅居中元素定寬高適用：

absolute + 負 margin
absolute + margin auto
absolute + calc

居中元素不定寬高：

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

1.absolute + 負 margin

為了實現上面的效果先來做些準備工作，假設 HTML 代碼如下，總共兩個元素，父元素和子元素：

<div class="wp">
 <div class="box size">123123</div>
</div>

wp 是父元素的類名，box 是子元素的類名，因為有定寬和不定寬的區別，size 用來表示指定寬度，下面是所有效果都要用到的公共代碼，主要是設置顏色和寬高。

注意：后面不在重復這段公共代碼，只會給出相應提示。

/* 公共代碼 */
.wp {
 border: 1px solid red;
 width: 300px;
 height: 300px;
}
.box {
 background: green; 
}
.box.size{
 width: 100px;
 height: 100px;
}
/* 公共代碼 */

絕對定位的百分比是相對于父元素的寬高，通過這個特性可以讓子元素的居中顯示，但絕對定位是基于子元素的左上角，期望的效果是子元素的中心居中顯示。

為了修正這個問題，可以借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了，css 代碼如下。

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
 position: relative;
}
.box {
 position: absolute;;
 top: 50%;
 left: 50%;
 margin-left: -50px;
 margin-top: -50px;
}

這是我比較常用的方式，這種方式比較好理解，兼容性也很好，缺點是需要知道子元素的寬高。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/absolute1.html

2.absolute + margin auto

這種方式也要求居中元素的寬高必須固定，HTML 代碼如下：

<div class="wp">
 <div class="box size">123123</div>
</div>

這種方式通過設置各個方向的距離都是 0，此時再講 margin 設為 auto，就可以在各個方向上居中了。

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
 position: relative;
}
.box {
 position: absolute;;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}

這種方法兼容性也很好，缺點是需要知道子元素的寬高。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/absolute2.html

3.absolute + calc

這種方式也要求居中元素的寬高必須固定，所以我們為 box 增加 size 類，HTML 代碼如下：

<div class="wp">
 <div class="box size">123123</div>
</div>

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

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
 position: relative;
}
.box {
 position: absolute;;
 top: calc(50% - 50px);
 left: calc(50% - 50px);
}

這種方法兼容性依賴 calc 的兼容性，缺點是需要知道子元素的寬高。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/absolute3.html

4.absolute + transform

還是絕對定位，但這個方法不需要子元素固定寬高，所以不再需要 size 類了，HTML 代碼如下：

<div class="wp">
 <div class="box">123123</div>
</div>

修復絕對定位的問題，還可以使用 css3 新增的 transform，transform 的 translate 屬性也可以設置百分比，其是相對于自身的寬和高，所以可以講 translate 設置為 -50%，就可以做到居中了，代碼如下：

/* 此處引用上面的公共代碼 */
/* 此處引用上面的公共代碼 */
/* 定位代碼 */
.wp {
 position: relative;
}
.box {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

這種方法兼容性依賴 translate2d 的兼容性。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/absolute4.html

5.lineheight

利用行內元素居中屬性也可以做到水平垂直居中，HTML 代碼如下：

<div class="wp">
 <div class="box">123123</div>
</div>

把 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; /* 修正文字 */
}

這種方法需要在子元素中將文字顯示重置為想要的效果。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/lineheight.html

6.writing-mode

很多同學一定和我一樣不知道 writing-mode 屬性，感謝 @張鑫旭老師的反饋，簡單來說 writing-mode 可以改變文字的顯示方向，比如可以通過 writing-mode 讓文字的顯示變為垂直方向。

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
 writing-mode: vertical-lr;
}

顯示效果如下：

水平方向
垂
直
方
向

更神奇的是所有水平方向上的 css 屬性，都會變為垂直方向上的屬性，比如 text-align，通過 writing-mode 和 text-align 就可以做到水平和垂直方向的居中了，只不過要稍微麻煩一點：

<div class="wp">
 <div class="wp-inner">
 <div class="box">123123</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;
}

這種方法實現起來和理解起來都稍微有些復雜。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/writing-mode.html

7.table

曾經 table 被用來做頁面布局，現在沒人這么做了，但 table 也能夠實現水平垂直居中，但是會增加很多冗余代碼：

<table>
 <tbody>
 <tr>
 <td class="wp">
 <div class="box">123123</div>
 </td>
 </tr>
 </tbody>
</table>

tabel 單元格中的內容天然就是垂直居中的，只要添加一個水平居中屬性就好了。

.wp {
 text-align: center;
}
.box {
 display: inline-block;
}

這種方法就是代碼太冗余，而且也不是 table 的正確用法。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/table.html

8.css-table

css 新增的 table 屬性，可以讓我們把普通元素，變為 table 元素的現實效果，通過這個特性也可以實現水平垂直居中。

<div class="wp">
 <div class="box">123123</div>
</div>

下面通過 css 屬性，可以讓 div 顯示的和 table 一樣：

.wp {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}
.box {
 display: inline-block;
}

這種方法和 table 一樣的原理，但卻沒有那么多冗余代碼，兼容性也還不錯。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/css-table.html

9.flex

flex 作為現代的布局方案，顛覆了過去的經驗，只需幾行代碼就可以優雅的做到水平垂直居中。

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

目前在移動端已經完全可以使用 flex 了，PC 端需要看自己業務的兼容性情況。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/flex.html

10.grid

感謝 @一絲姐反饋的這個方案，css 新出的網格布局，由于兼容性不太好，一直沒太關注，通過 grid 也可以實現水平垂直居中。

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

代碼量也很少，但兼容性不如 flex，不推薦使用。

點擊查看完整 DEMO：

http://yanhaijing.com/vertical-center/grid.html

總結

下面對比下各個方式的優缺點，肯定又雙叒叕該有同學說回字的寫法了，簡單總結下：

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

小貼士：關于 flex 的兼容性決方案，請看這里：

https://yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/

最近發現很多同學都對 css 不夠重視，這其實是不正確的，比如下面的這么簡單的問題都有那么多同學不會，我也是很無語：

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
 color: red
}
.blue {
 color: blue
}

問兩個 div 的顏色分別是什么，竟然只有 40% 的同學能夠答對，這 40% 中還有很多同學不知道為什么，希望這些同學好好補習下 CSS 基礎。

<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>

過以下CSS樣式代碼實現水平方向居中布局效果

.parent{display:table-cell;vertical-align:middle;}

優點:

瀏覽器的兼容性比較好

缺點:

vertical-algin屬性具有繼承性, 導致父級元素的文本也是居中顯示的

在線咨詢

上一篇：HTML5實現大文件分片上傳思路
下一篇：十款好用的HTML生成工具推薦，幫你高效完成開發

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

你的底線是bottom line？沒有人在觸碰你的底線啦！

1.absolute + 負 margin

2.absolute + margin auto

3.absolute + calc

4.absolute + transform

5.lineheight

6.writing-mode

7.table

8.css-table

9.flex

10.grid

總結

您的項目需求