css-float和居中问题

参考资料

笔记

父容器清除浮动，避免父元素的塌陷，即内部元素都发生浮动后，高度为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父元素内时:

.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设置为一样即可，

.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设置，比如内容无法在一行内显示，则可以使用把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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,319评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,801评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,567评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,156评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,019评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,090评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,500评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,192评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,474评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,566评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,338评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,212评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,572评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,890评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,169评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,478评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,661评论 2赞 335

css-float和居中问题

参考资料

笔记

水平居中

inline元素在block父元素内时:

如果是block元素时：

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

垂直居中

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

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

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

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

如果可以使用flexbox

同时水平和垂直居中

如果元素的宽高是固定的

如果不知道元素的宽高

如果可以用flexbox

推荐阅读更多精彩内容