css-float和居中問題

參考資料

http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html
https://css-tricks.com/centering-css-complete-guide/
http://howtocenterincss.com/

筆記

父容器清除浮動，避免父元素的塌陷周叮，即內(nèi)部元素都發(fā)生浮動后魁莉，高度為0.

<div class="box-set">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

<style>
  .box-set:before,
  .box-set:after {
    display: table;
    content: "";
  }

  .box-set:after {
    clear: both;
  }

  .box-set {
    *zoom: 1;
  }

  .box-set {
    background: red;
  }

  .box {
    background: #8ec63f;
    margin-top: 20px;
    height: 100px;
    float: left;
    margin: 10px;
    width: 200px;
    box-shadow: 0 0 500px #000;
  }
</style>

效果圖.png

水平居中

inline元素在block父元素內(nèi)時:

.center-children {
  text-align: center;
}

下面是一個例子：

<header>
  This text is centered.
</header>
<nav role='navigation'>
  <a href="#0">One</a>
  <a href="#0">Two</a>
  <a href="#0">Three</a>
  <a href="#0">Four</a>
</nav>  
<style>

body {
  background: #f06d06;
}

header, nav {
  text-align: center;
  background: white;
  margin: 20px 0;
  padding: 10px;
}

nav a {
  text-decoration: none;
  background: #333;
  border-radius: 5px;
  color: white;
  padding: 3px 8px;
}
</style>

效果.png

如果是block元素時：

.center-me {
  margin: 0 auto;
  width: 200px;// 必須加寬度诡右，否則block元素會撐滿寬度百侧，沒必要居中了
}

下面是一個例子：

<main>
  <div class="center">
    I'm a block level element and am centered.
  </div>
</main>

<style>
body {
  background: #f06d06;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

.center {
  margin: 0 auto;
  width: 200px;
  background: black;
  padding: 20px;
  color: white;
}
<style>

效果.png

如果是多個block元素排列成一行并居中時：

第一種做法是改變display的類型：

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings
    do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    margin: 20px 0;
    padding: 10px;
  }

  main div {
    background: black;
    color: white;
    padding: 15px;
    max-width: 125px;
    margin: 5px;
  }

  .inline-block-center {
    text-align: center;
  }

  .inline-block-center div {
    display: inline-block;
    text-align: left;
  }
</style>

效果.png

第二種是使用flex：

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings
    do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
<style>
  .flex-center {
    display: flex;
    justify-content: center;
  }
</style>

效果與上圖一致

垂直居中

如果是inline元素且在一行中垂直居中

只要把該元素的上下padding設(shè)置為一樣即可柬泽，

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

例如:

<main>
  <a href="#0">We're</a>
  <a href="#0">Centered</a>
  <a href="#0">Bits of</a>
  <a href="#0">Text</a>
</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    margin: 20px 0;
    padding: 50px;
  }

  main a {
    background: black;
    color: white;
    padding: 40px 30px;
    text-decoration: none;
  }
</style>

效果如下圖：

效果.png

如果因為各種原因不能使用padding設(shè)置窃躲，比如內(nèi)容無法在一行內(nèi)顯示论悴，則可以使用把line-height等于height即可：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

例如：

<main>
  <div>
    I'm a centered line.
  </div>
</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    margin: 20px 0;
    padding: 40px;
  }

  main div {
    background: black;
    color: white;
    height: 100px;
    line-height: 100px;
    padding: 20px;
    width: 50%;
    white-space: nowrap;
  }
</style>

效果：

效果.png

如果是inline元素且在多行中垂直居中

第一種方法：

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  table {
    background: white;
    width: 240px;
    border-collapse: separate;
    margin: 20px;
    height: 250px;
  }

  table td {
    background: black;
    color: white;
    padding: 20px;
    border: 10px solid white;
    /* default is vertical-align: middle; */
  }
</style>

第二種方法：

<main>
  <div class="center-table">
    <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  .center-table {
    display: table;
    height: 250px;
    background: white;
    width: 240px;
    margin: 20px;
  }

  .center-table p {
    display: table-cell;
    margin: 0;
    background: black;
    color: white;
    padding: 20px;
    border: 10px solid white;
    vertical-align: middle;
  }
</style>

第三種方法：

<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  div {
    background: white;
    width: 240px;
    margin: 20px;
  }

  .flex-center {
    background: black;
    color: white;
    border: 10px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px; // 必須有一個固定的高度
    resize: vertical;
    overflow: auto;
  }

  .flex-center p {
    margin: 0;
    padding: 20px;
  }
</style>

效果如下：

效果.png

如果以上都不能使用：

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

例如：

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  div {
    background: white;
    width: 240px;
    height: 200px;
    margin: 20px;
    color: white;
    resize: vertical;
    overflow: auto;
    padding: 20px;
  }

  .ghost-center {
    position: relative;
  }

  .ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
  }

  .ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 190px;
    margin: 0;
    padding: 20px;
    background: black;
  }
</style>

如果是block元素且已知元素高度

不知道高度的情況很常見掖棉，但是如果知道高度，可以：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

例如：

<main>

  <div>
    I'm a block-level element with a fixed height, centered vertically within my parent.
  </div>

</main>


<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;
    resize: vertical;
    overflow: auto;
  }

  main div {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 100px;
    margin-top: -70px;
    background: black;
    color: white;
    padding: 20px;
  }
</style>

效果如下：

效果.png

如果是blobk元素且不知道元素高度

如下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

例如：

<main>

  <div>
    I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;
    resize: vertical;
    overflow: auto;
  }

  main div {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 20px;
    transform: translateY(-50%);
    resize: vertical;
    overflow: auto;
  }
</style>

如果可以使用flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

例如：

<main>

  <div>
    I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
  }

  main {
    background: white;
    height: 300px;
    width: 200px;
    padding: 20px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    resize: vertical;
    overflow: auto;
  }

  main div {
    background: black;
    color: white;
    padding: 20px;
    resize: vertical;
    overflow: auto;
  }
</style>

同時水平和垂直居中

如果元素的寬高是固定的

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

例如：

<main>

  <div>
    I'm a block-level element a fixed height and width, centered vertically within my parent.
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
    padding: 20px;
  }

  main {
    position: relative;
    background: white;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
  }

  main div {
    background: black;
    color: white;
    width: 200px;
    height: 100px;
    margin: -70px 0 0 -120px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
  }
</style>

效果：

效果.png

如果不知道元素的寬高

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

例如:

<main>

  <div>
    I'm a block-level element of an unknown height and width, centered vertically within my parent.
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
    padding: 20px;
  }

  main {
    position: relative;
    background: white;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
  }

  main div {
    background: black;
    color: white;
    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    resize: both;
    overflow: auto;
  }
</style>

效果：

效果.png

如果可以用flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

例如：

<main>

  <div>
    I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
  </div>

</main>

<style>
  body {
    background: #f06d06;
    font-size: 80%;
    padding: 20px;
  }

  main {
    background: white;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    resize: both;
    overflow: auto;
  }

  main div {
    background: black;
    color: white;
    width: 50%;
    padding: 20px;
    resize: both;
    overflow: auto;
  }
</style>

最后編輯于：2017.12.09 01:48:12

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末膀估，一起剝皮案震驚了整個濱河市幔亥，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌察纯，老刑警劉巖帕棉，帶你破解...
沈念sama閱讀 219,427評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異饼记，居然都是意外死亡香伴，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,551評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門具则，熙熙樓的掌柜王于貴愁眉苦臉地迎上來即纲，“玉大人，你說我怎么就攤上這事博肋〉驼” “怎么了蜂厅？”我有些...
開封第一講書人閱讀 165,747評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長膊畴。經(jīng)常有香客問我掘猿，道長，這世上最難降的妖魔是什么唇跨？我笑而不...
開封第一講書人閱讀 58,939評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任稠通，我火速辦了婚禮，結(jié)果婚禮上买猖，老公的妹妹穿的比我還像新娘改橘。我一直安慰自己，他們只是感情好政勃，可當(dāng)我...
茶點故事閱讀 67,955評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布唧龄。她就那樣靜靜地躺著，像睡著了一般奸远。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上讽挟，一...
開封第一講書人閱讀 51,737評論 1贊 305
城市分裂傳說
那天懒叛，我揣著相機(jī)與錄音，去河邊找鬼耽梅。笑死薛窥，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的眼姐。我是一名探鬼主播诅迷，決...
沈念sama閱讀 40,448評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼众旗！你這毒婦竟也來了罢杉？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,352評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤贡歧，失蹤者是張志新（化名）和其女友劉穎滩租，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體利朵，經(jīng)...
沈念sama閱讀 45,834評論 1贊 317
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡律想，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,992評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了绍弟。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片技即。...
茶點故事閱讀 40,133評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖樟遣，靈堂內(nèi)的尸體忽然破棺而出而叼，到底是詐尸還是另有隱情身笤，我是刑警寧澤，帶...
沈念sama閱讀 35,815評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布澈歉，位于F島的核電站展鸡，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏埃难。R本人自食惡果不足惜莹弊，卻給世界環(huán)境...
茶點故事閱讀 41,477評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望涡尘。院中可真熱鬧忍弛，春花似錦、人聲如沸考抄。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,022評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽川梅。三九已至疯兼，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間贫途，已是汗流浹背吧彪。一陣腳步聲響...
開封第一講書人閱讀 33,147評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留丢早，地道東北人姨裸。一個月前我還...
沈念sama閱讀 48,398評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像怨酝，于是被迫代替她去往敵國和親傀缩。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,077評論 2贊 355

css-float和居中問題

參考資料

筆記

水平居中

inline元素在block父元素內(nèi)時:

如果是block元素時：

如果是多個block元素排列成一行并居中時：

垂直居中

如果是inline元素且在一行中垂直居中

如果是inline元素且在多行中垂直居中

如果是block元素且已知元素高度

如果是blobk元素且不知道元素高度

如果可以使用flexbox

同時水平和垂直居中

如果元素的寬高是固定的

如果不知道元素的寬高

如果可以用flexbox

推薦閱讀更多精彩內(nèi)容