CSS レイアウトの解釈 - 水平方向と垂直方向の centering_html/css_WEB-ITnose

要素を水平方向および垂直方向に中央揃えにすることは、私たちの仕事で頻繁に行われることであり、CSS レイアウトの重要な部分でもあります。この記事では、CSS で水平方向および垂直方向に中央揃えを行ういくつかの方法について説明します。 Souche では日常業務で IE の下位バージョンについて心配する必要がなくなったため、この記事に掲載されている方法では IE は考慮されていません。互換性が必要な場合は、次の記事を参照してください。 cnblogs.com/Dudy/p/4085292.html。さらに、記事内の CSS はすべて Less で書かれています。理解できない場合は、私が提供したデモのリンクを開いてコンソールで最終的な CSS を表示するか、「コンパイル済みの表示」ボタンをクリックしてください。コンパイルされた CSS

まず、昨年の cssConf カンファレンス中に Ali の先生である @Han DongWinter によって公開された写真を見てみましょう:

写真に示されているように、CSS レイアウトはいくつかに分割できます。大きなブロック:

• ボックス内のレイアウト

• テキストのレイアウト

• ボックスモデル自体のレイアウト

• ボックス間のレイアウトの視覚的な書式設定

• のレイアウト通常のフローから脱却したボックス

• 絶対レイアウトのコンテキストでのレイアウト

• フロートレイアウトのコンテキストでのレイアウト

• 通常のフローでのボックスのレイアウト

• BFC レイアウトコンテキストでのレイアウト

• IFCレイアウトコンテキストでのレイアウト

• FFCレイアウトコンテキストでのレイアウト

• テーブルレイアウトコンテキストでのレイアウト

• CSSグリッドレイアウトコンテキストでのレイアウト

すべての CSS レイアウトは実際に回転しますこれらのレイアウト モジュールの周囲を水平方向に配置します。垂直方向の中央揃えについても同様です。

1. テキストの水平方向および垂直方向の中央揃え

line-height + text-align:center

デモリンク

コード:

<div class='wrap'>    水平垂直居中水平垂直居中</div>

html,body{    margin: 0;}.wrap{  line-height: 400px;  text-align:center;  height: 400px;  font-size: 36px;  background-color: #ccc;}

このメソッドは、単一行のテキストの水平方向および垂直方向の中央揃えにのみ適しています

2. ボックス モデルの使用 水平方向と垂直方向の中央揃え

私たちが一般的に扱うボックス モデルはブロック レベルのボックス ボックス モデルであり、ブロック レベルのボックス ボックス モデルのみがより一般的に使用されます。 box は以下に示すように content-box 、padding-box、border-box、margin-box で構成されます:

つまり、サブボックスの水平辺と垂直辺と最も外側のボックスの間の距離は、次のセンタリング方法もあります:

padding

DEMO link

コード:

<div class="wrap">    <div class="content"></div></div>

@wrapWidth : 400px;.wrap{  margin-left: auto;  margin-right: auto;  margin-top: 20px;  width: @wrapWidth;  height: @wrapWidth;  background-color: #ccc;}.content{  @contentWidth : 100px;  width: @contentWidth;  height: @contentWidth;  padding: (@wrapWidth - @contentWidth) / 2;  background-color: #333;  background-clip:content-box;}

css3 の calc() を使用して動的に計算することもできます:

DEMO link

<div class="wrap">    <div class="content"></div></div>

.wrap{  margin-top: 20px;  margin-left: auto;  margin-right: auto;  width: 400px;  height: 400px;  background-color: #ccc;  .content{    padding: -webkit-calc(~"(100% - 100px) / 2");    padding: calc(~"(100% - 100px) / 2");    width: 100px;    height: 100px;    background-color: #333;    background-clip: content-box;  }}

~"" は、less でコンパイルされていないことを Less に伝える構文です。less でコンパイルすると、css の calc 関数のパラメータは 100% - 100px ではなく、0 になります。 %。

余白埋め

デモリンク

コード:

<div class="wrap">    <div class="ele"></div></div>

.wrap{  @wrapHeight : 400px;  @contenHeight : 100px;  overflow: hidden;  width: 100%;  height: @wrapHeight;  background-color: #ccc;  .ele{    margin-left: auto;    margin-right: auto;    margin-top: (@wrapHeight - @contenHeight) / 2;    width: 100px;    height: @contenHeight;    background-color: #333;    color: #fff;  }}

余白埋めを使用するには、要素の幅を知る必要がありますが、これはあまり柔軟性がありません。ただし、CSS3 は、fit-content で属性値を作成しました。要素の幅を動的に計算できるデモ リンク

レイアウトにボックス モデルを使用すると、リフローが発生せず、実際には、多くのレイアウトを実現できます。これは、視覚的な書式設定によってのみ実現されます。これについては、ここでは説明しません。

3. 絶対レイアウトのコンテキストでの水平方向と垂直方向のセンタリング

50% + -50%

原理は非常に簡単です。つまり、最初にボックスの左側を中点に配置するには left: 50% を使用します。親コンテナーのボックスを移動し、ボックスをその幅の 50% だけ左にオフセットします。 以下に 3 つの具体的な実装を示します。

デモ リンク

<div class="wrap">    <div class="ele margin">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div></div><div class="wrap">    <div class="ele translate">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div></div><div class="wrap">    <div class="ele relative">    <div class="ele-inner">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div>  </div></div>

.wrap{  position: relative;  width: 100%;  height: 200px;  border:1px solid;  background-color: #ccc;  .ele{    position: absolute;    left: 50%;    top: 50%;    background-color: #333;    &.margin{      width: 160px;      height: 100px;      margin-left: -80px;      margin-top: -50px;    }    &.translate{      -webkit-transform:translate3d(-50%, -50%, 0);      transform:translate3d(-50%, -50%, 0);    }    .ele-inner{      position: relative;      left: -50%;      top: -50%;      width: 100%;      height: 100%;      background-color: #333;    }    &.relative{      width: 150px;      height: 100px;      background-color: transparent;    }  }}

上記 3 つの方法のうち、margin メソッドと相対メソッドは要素の幅と高さを知る必要があります (相対メソッドは高さだけを知っています) OK)、固定レイアウトに適しており、transform メソッドは要素の幅と高さを知る必要はありません

text- align:center + ABS

text-aign:center は絶対要素に直接作用することはできませんが、 left などの行レベルの絶対要素はテキストの影響を受けません。 Zhang 先生のこの記事を参照してください

。 DEMOリンク

コード:

<div class="wrap">    <div class="ele"></div></div>

.wrap{  text-align: center;  width: 100%;  height: 400px;  background-color: #ccc;  font-size: 0;}.ele{  position: absolute;  margin-left: -(100px / 2);  margin-top: (400px - 100px) / 2;  width: 100px;  height: 100px;  display: inline-block;  background-color: #333;}

まずtext-align:centerが何をするのか簡単に説明します。 ただし、絶対要素がinline-blockの場合はテキストの影響を受けます。ここにテキストがないのかと尋ねられるかもしれませんが、それは匿名のテキスト ノードであるとしか言えません。詳細についてはここでは説明しません。標準を参照して、次の文を理解してください。

If the inline box contains no glyphs at all, it is considered to contain a strut (an invisible glyph of zero width) with the A and D of the element's first available font

然后这个匿名文本由于受到text-align:center影响居中了，这个时候absolute盒子的左边跟父容器的中点对齐了，所以就还需要往回拉50%，这里用的是margin-left，你也可以用其它方式拉。然后就是垂直方向的对齐，垂直方向是不能被操作文本的属性影响的，所以我这里用的是margin-top来让它偏移下去。

absolute + margin : auto

DEMO链接

代码：

<div class="wrap">    <div class="ele"></div></div>

html,body{    width: 100%;  height: 100%;  margin: 0;}.wrap{  position: relative;  width: 100%;  height: 100%;  background-color: #ccc;  .ele{    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;    width: 100px;    height: 100px;    background-color: #333;  }}

关于这种布局的原理，在标准中能找到如下解释：

w3c.org 中有这样一句话：

The constraint that determines the used values for these elements is:  'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

这句话说的是absolute性质的盒子，它的包含块的宽度等于它的盒模型的宽度 + left + right值，包含块的高度同理，盒模型包括margin-box、border-box、padding-box、content-box，而在这个居中方法中，.ele的left + right值是0，width是定值，width所在盒子包括了除了margin-box外的那三个box，margin都是auto值，按照上面那个公式，margin-left + margin-right的值应该等于包含块的宽度 - left的值 - right的值 - width的值，也就是说margin-left + margin-right的值等于除了width所占宽度外的剩下宽度，拥有剩下宽度后，就是平分其宽度，以让左右两边相等，达到居中，标准中给出了答案：

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left')

这里的"three"指的是left, width, right。如果left、right和width都不为auto，同时margin-left和margin-right都是auto，除非特别情况，它们俩就是相等的，而这个例子中不在特殊情况之列，因此两者平分，此时达到了水平居中。而对于垂直方向的margin的auto值的计算，标准中也有如下两句话，跟水平方向的同理(这里的“three”指的是“top, height, bottom”)：

the used values of the vertical dimensions must satisfy this constraint:  'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

if none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.

垂直方向也就因此也居中了。

这种方法能简单的做到居中，但是必须有width和height值

适用于图片居中的网易nec的一个方法

DEMO链接

代码：

<div class="wrap">    <p>    <img src="http://nec.netease.com/img/s/1.jpg" alt="" />    <img src="http://nec.netease.com/img/s/1.jpg" alt="" />  </p>  </div>

html,body{    width: 100%;  height: 100%;  margin: 0;}.wrap{  position:relative;  width: 100%;  height: 100%;  p{    position:absolute;    left:50%;    top:50%;  }  img{    &:nth-child(1){      position:static;      visibility:hidden;    }    &:nth-child(2){      position:absolute;      right:50%;      bottom:50%;    }  }}

这种方法主要是利用了一个图片进行占位，以让父容器获得高宽，从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，如果是不使用nth-child选择器的花，IE6都是能顺利兼容的

四. float布局上下文下的水平垂直居中

float + -50%

DEMO链接

代码：

<div class="wrap">    <div class="ele">    <div class="ele-inner">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中</div>  </div></div>

.wrap{  float: left;  width: 100%;  height: 400px;  background-color: #ccc;  .ele{    float: left;    position: relative;    left: 50%;    top: 50%;  }  .ele-inner{    position: relative;    left: -50%;    -webkit-transform : translate3d(0, -50%, 0);    transform : translate3d(0, -50%, 0);    background-color: #333;    color: #fff;  }}

这种方法的原理，首先是利用float属性将需要居中的元素的父元素.ele的宽度收缩，然后left:50%将.ele的左边和水平中线对齐，这个时候还没居中，还需要将其往回拉自身宽度的50%，于是.ele-inner便是真正需要水平居中的元素，我给它一个position:relative，将其往回拉自身宽度50%就行了。对于垂直方向，依然是先将.ele top:50%到垂直方向中点，但是这时给.ele-inner top:50%是不起作用的，因为如果没给父元素明确高度的话，这个50%是计算不出来的，因此，就有了transform : translate3d(0, -50%, 0)。

这种方法的好处是元素可以不定宽，任何时候都可以做到居中

我当时在w3cplus的站上发现这个方法后，当时觉得这个方法很好，兼容性好，又还可以不定宽，但当我用了一段时间后，发现了一个问题：

就是当居中元素的父元素left:50%时，如果元素宽度足够大，会超出外面的容器，而如果外面的容器又正好是overflow:auto的话，那就会在外面产生滚动条，问题DEMO链接 在这里 ，后来我找到了一个办法： DEMO链接 ，基本思想就是利用元素超出父元素的左边不会产生滚动条的特性，有点奇淫技巧，但是能解决问题，有兴趣的可以看看

margin-bottom : -50%

DEMO链接

代码：

<div class="wrap">    <div class="placeholder"></div>  <div class='content'></div></div>

.wrap{  float: left;  width: 100%;  height: 400px;  background-color: #ccc;  @contentHeight : 100px;  .placeholder{    float: left;    width: 100%;    height: 50%;    /*居中元素.content高度一半*/    margin-bottom: -(@contentHeight / 2);  }  .content{    position: relative;    left: 50%;    transform:translate3d(-50%, 0, 0);    clear: both;    /*演示用，实际不需要定宽*/    max-width: 100px;    height: @contentHeight;    background-color: #333;  }}

这种方法是先让占位元素.placeholder占据50%高度，然后给一个居中元素高度一半的负的margin-bottom，然后下面的元素只要跟着摆放就能垂直居中了。水平方向就是利用translate做偏移，这个没什么好说的，你也可以换成其他办法。

这种方法就是各种固定死，首先最外层的父容器需要一个固定高度，以让.placeholder的height:50%有效，然后，margin-bottom也需要固定死，而且得需要知道居中元素高度。单纯就水平方向来说，这个方法比较适合需要兼容低版本IE的固定式布局的项目，因为兼容性好。

五.BFC布局上下文下的水平垂直居中

BFC的全称是块级排版上下文，这里有篇 文章 对齐进行了简单的介绍，BFC布局上下文下的布局其实就是利用盒模型本身进行的布局，前面在利用盒模型布局的那一节中已经讲过了，这里就不重复了

六.IFC布局上下文下的水平垂直居中

IFC又是个什么概念呢，你可以看看 官方文档 ，也可以简单的理解为 display为inline性质的行级元素的布局。

text-align:center + vertical-align:middle

DEMO链接

代码：

<div class="wrap">    <div class='placeholder'><!--占位元素，用来作为居中元素的参照物--></div>  <div class="ele"></div></div>

.wrap{  width: 100%;  height: 400px;  /* min-height: 400px; */  text-align:center;  font-size: 0;  background-color: #ccc;  .placeholder,  .ele{    vertical-align: middle;    display: inline-block;  }  .placeholder{    overflow: hidden;    width: 0;    min-height: inherit;    height: inherit;  }  .ele{    width: 100px;    height: 100px;    background-color: #333;  }}

行级元素会受到text-align和vertical-align的影响，关于vertical-align，不太好理解，我多贴几篇文章： @灵感idea 的 ， 张鑫旭的 ， MDN上的 ， css-trick上的 ，以及 官方文档 ，这里首先是用text-center让inline-block水平居中，然后给一个vertical-align:middle，但是仅仅给vertical-align:middle是不够的，因为此时它还没有vertical-align对齐的参照物，所以就给了一个占位的inline-block，它的高度是100%。

这个方法对于居中元素不需要定宽高，而且元素根据vertical-align值的不同不仅仅可以实现居中，还可以将其放在上面下面等。缺点是父元素需定高

text-align:center + line-height

DEMO链接

代码：

<div class="wrap">    <div class="ele">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中</div></div>

.wrap{  text-align: center;  line-height: 400px;  width: 100%;  height: 400px;  background-color: #ccc;  font-size: 0;  .ele{    line-height: normal;    vertical-align: middle;    display: inline-block;    background-color: #333;    font-size: 18px;    color: #fff;  }}

这个方法，首先是水平方向，text-align:center就行了，至于垂直方向，起作用的就是父容器的一个line-height和居中元素的vertical-align:middle，为什么这两个属性可以让一个inline-block垂直居中呢，这里重点是父容器在其下面产生了一个隐匿的文本节点，这个我在上面 text-align:center + absolute 那个方法的讲解中说到过了，然后这个这个隐匿文本节点会因line-height属性的作用而拥有了一个父容器一样高的行高，此时元素有了一个vertical-align对齐的参照物，再给其vertical-align:middle值就能垂直对齐了。

使用这个方法，居中元素无需定宽高，但缺点是得给父容器一个固定的行高才行。

text-align:center + font-size

DEMO链接

代码：

<div class="wrap">    <div class="ele"></div></div>

.wrap{  text-align: center;  font-size: 400px * 0.873;/*约为高度的0.873*/  margin-left: auto;  margin-right: auto;  width: 400px;  height: 400px;  background-color: #ccc;  .ele{    vertical-align: middle;    width: 100px;    height: 100px;    display: inline-block;    background-color: #333;  }}

这个方法来自淘宝，基本原理还是让隐匿文本节点所占据的行高等于父容器的高度，然后给居中元素一个vertical-align:middle对齐的一个参照。只是这里把定义line-height值换成了定义font-size值，让font-siz足够大从而让其行高等于父容器高度。为了证明这个font-size的作用，我把居中元素换成文本

DEMO链接

代码：

<div class="wrap">    a</div>

.wrap{  text-align: center;  font-size: 400px * 0.873;/*约为高度的0.873*/  margin-left: auto;  margin-right: auto;  width: 400px;  height: 400px;  background-color: #ccc;}

效果：

可以看到字母a垂直居中了，这个字母a就对应那个隐匿文本节点

七.FFC布局上下文下的水平垂直居中

父元素、子元素都定义flex：

DEMO链接

代码：

<div class="wrap">    <div class="ele">  居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中  </div></div>

html,body{    width: 100%;  height: 100%;}.wrap{  display: flex; align-items: center;  justify-content: center;  width: 100%;  height: 100%;  background-color: #ccc;  .ele{    background-color: #333;  }}

只有父元素定义flex，子元素定义margin:auto：

DEMO链接

代码：

<div class="wrap">    <div class="ele">  居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中<br>    居中居中居中居中居中居中居中  </div></div>

html,body{    width: 100%;  height: 100%;}.wrap{  display: flex;  width: 100%;  height: 100%;  background-color: #ccc;  .ele{    margin:auto;    background-color: #333;  }}

margin:auto在这里垂直方向也生效了

flexbox是个很强大的布局模块，也就三个属性就搞定居中了，而且不论父容器还是居中元素都可以不定宽高。参考链接： 图解CSS3 Flexbox属性

八.table布局上下文下的水平垂直居中

DEMO链接

代码：

<div class='wrap'>      <div class='ele'>      <div class="ele-inner">居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居中居中</div>    </div></div>

.wrap{  width: 100%;  height: 300px;  display: table;  background-color: #ccc;}.ele{  text-align:center;  vertical-align: middle;  display:table-cell;}                .ele-inner{  display: inline-block;  background-color: #333;}

原理就是把div模拟成表格(换成真正的表格标签也是可以的)，然后给那几个属性就成了，这个没什么好讲的，不懂的去翻翻手册就明白了，然后@于江水写的一篇 table那些事 还不错

九.CSS grid布局上下文下的水平垂直居中

CSS3 grid layout是IE搞出来的一个布局模块，目前貌似还只有IE0和IE11支持，我没有研究过其居中的方法，有兴趣的可以看看 大漠老师的介绍文章

十.其它未知归属的水平垂直居中方法

使用button标签

DEMO链接

代码：

<button>    <div>    居中居中居中居中居中居中<br>    居中居中居中居中居中居中<br>    居中居中居中居中居中居中<br>    居中居中居中居中居中居中<br>  </div>  </button>

button{    width: 100%;  height: 400px;  background-color: #cccccc;  border-width:0;  &:focus{    outline:none;  }  div{    display: inline-block;    font-size: 18px;    background-color: #333;    color: #fff;  }}

这种方法属于奇淫技巧，利用button标签天生外挂的这一技能对其里面的元素进行居中。

(本文完)