CSS の水平方向と垂直方向のセンタリングを解釈するlayout_html/css

要素を水平方向および垂直方向に中央揃えにすることは、私たちの仕事で頻繁に行われることであり、CSS レイアウトの重要な部分でもあります。この記事では、CSS で水平方向および垂直方向に中央揃えを行ういくつかの方法について説明します。 Souche では日常業務で IE の下位バージョンについて心配する必要がなくなったため、この記事に掲載されている方法では IE は考慮されていません。互換性が必要な場合は、次の記事を参照してください。 cnblogs.com/Dudy/p/4085292.html

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

図に示すように、CSS レイアウトいくつかの大きな部分に分けることができます:

ボックス内のレイアウト
- テキストのレイアウト
- ボックスモデル自体のレイアウト
ボックス間のレイアウトビジュアルフォーマット
- ボックスのレイアウト通常のフローから外れています
  - 絶対レイアウトコンテキスト下のレイアウト
  - フロートレイアウトコンテキスト下のレイアウト
- 通常のフロー下のボックスのレイアウト
  - BFCレイアウトコンテキスト下のレイアウト
  - IFCレイアウトコンテキスト下のレイアウト
  - FFCレイアウト下のレイアウトcontext
  - テーブルレイアウトのコンテキストでのレイアウト
  - 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;  }}

ログイン後にコピー

ここに calc で使用しました ~"" が書かれていますが、これは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 つの具体的な実装を示します。メソッドは要素の幅と高さを知る必要があります (相対メソッドは高さのみを知っています) OK)、固定レイアウトに適しており、transform メソッドは要素の幅と高さを知る必要はありません

text-align: center + 絶対

text-aign:center は絶対要素に直接作用することはできませんが、左および同等の値を持つ行レベルの絶対要素はテキストの影響を受けません。張先生のこの記事を参照してください。

デモリンク

コード:

<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;    }  }}

ログイン後にコピー

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

インラインボックスにグリフがまったく含まれていない場合は、次のようなストラット (幅 0 の非表示のグリフ) が含まれていると見なされます。要素の最初に使用可能なフォントの A と D

このとき、text-align:center の影響で匿名テキストが中央に配置され、絶対ボックスの左側が親コンテナの中点に揃えられます。ここでは、マージン左を使用します。他の方法でプルすることもできます。次に、垂直方向の配置です。垂直方向は操作されたテキストのプロパティの影響を受けることができないため、ここでは margin-top を使用してオフセットします。

absolute + margin : auto

DEMO link

Code:

<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;}

ログイン後にコピー

このレイアウトの原理については、標準に次の説明があります:

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')

结合原文中的上下文，这句话主要说的是如果left、right和width都不为auto，同时margin-left和margin-right都是auto，除非特别情况，它们俩就是相等的，而这个例子中不在特殊情况之列，因此两者平分，此时达到了水平居中。而对于，垂直方向的margin的auto值的计算，我没有找到相关规范，还望知道的大神予以指点。

这种方法能简单的做到居中，但是必须有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布局上下文下的水平垂直居中

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;  }}

ログイン後にコピー

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标签天生外挂的这一技能对其里面的元素进行居中。