はじめに:
最近聞いてインタビューの質問をたくさん見:中心垂直および水平を完了するためにCSSを使用するにはいくつかの方法を教えてください?CSSは、ちょうどその時見て見基づく記事はここに、完全に中央に話している記事の内容を要約します。
まず、絶対(絶対センタリング)を使用します
1.1具体的なコードは以下のとおり
.container {
position: relative;
}
.absolute_center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
padding: 20px;
overflow: auto;
}
<div class="container">
<div class="absolute_center">
<ul>
<li>
该方法的核心思想是是使用绝对定位布局,使当前元素脱离正常的流体特性,而使用absolute的流体特性
</li>
</ul>
</div>
</div>
1.2この方法の核となるアイデアは、次のとおりです。
使用absolute进行定位布局,脱离正常的块状元素流体特性,而通过absolute的流体特性完成垂直水平居中。
あなたが知っておく必要がある2つの基本的な知識があります。
1.流体特性:
块状水平元素,如div元素,在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等,实际内容区域会响应变窄;
2.absolute流体特性:
默认是不具有流体特性的,而是在特定条件下才具有,而这个条件就是"对立方向同时发生定位的时候",即left与right为水平方向定位,top与bottom为垂直方向定位,而当对立方向同时具有定位数值的时候,absolute的流体特性就发生了。
1.3長所と短所:
优:
1.兼容性好,absolute流体特性IE7就兼容了,可兼容所有现代浏览器;
2.没有额外的标记html元素,样式简单;
3.内容的宽度以及高度写法支持使用百分比以及min-/max-写法;
4.对图像文件也同样支持;
缺:
1.必须定义内容的高度;
2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况;
第二に、負外側ドン充填法(負のマージン)
これはおそらく、最も一般的に使用される方法であって、高さと要素の値は、ドキュメントフローの相対レイアウトを設定し、設定することによって解放されたときに要素の幅が固定されtop: 50%; left: 50%;
、使用margin-left
とmargin-top
完全に中心要素を作ります。
2.1具体的なコードは以下のとおり
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Negative {
position: absolute;
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
background-color: cornsilk;
}
<div class="container">
<div class="is-Negative">
</div>
</div>
2.2本方法の核となるアイデアです。
使用相对布局,并使用top以及left使内容置于容器中心部位,再使用margin来控制偏移量。
ここでは、その時点ノートがあります:
当使用box-sizing:border-box属性的时候,偏移量是不需要计算border以及padding的。
2.3長所と短所:
优:
1.兼容性好,包括IE6-IE7
2.没有额外的标记html元素,代码量少;
缺:
1.非响应式的,不能配合百分比以及min-/max-使用;
2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况;
3.当元素使用box-sizing:border-box和使用默认的content-box偏移量是不一样的,需要重新计算;
第三に、使用するトランスフォーム
3.1具体的なコードは以下のとおり
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: darkseagreen;
}
<div class="container">
<div class="is-Transformed">
<ul>
<li>
该方法的核心思想是使用相对布局,并使用top以及left使内容置于容器中心部位,再使用translate来控制偏移量
</li>
</ul>
</div>
</div>
3.2この方法の核となるアイデアは、次のとおりです。
使用相对布局,并使用top以及left使内容置于容器中心部位,再使用transform来控制偏移量。
3.3長所と短所:
优:
1.内容宽度以及高度自适应,可以不指定内容的宽度以及高度;
2.代码量少
缺:
1.兼容性差了点,由于transform不兼容IE8,所以只支持IE9及其以上的现代浏览器;
2.为了兼容各种浏览器,需要些额外的css前缀;
3.如果元素有使用transform属性,可能会影响到其他的变换效果;
4.在有些时候会出现边缘模糊的情况,这是浏览器渲染的问题,尤其是使用了transform-style: preserve-3d属性的时候
表のセルの使用
これは最高の垂直プログラムを中心に、しかし、最大の問題は、垂直方向のセンタリング効果を完了するために、3つの要素が必要で完了するために、テーブルのセルを使用して、追加のHTML要素を必要としていることができます。
4.1具体的なコードは以下のとおり
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Table {
display: table;
}
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: deepskyblue;
}
<div class="container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
使用table-cell完成垂直水平居中
</div>
</div>
</div>
@import "./absolute_center4.png"{width="50%"}
4.2本方法の核となるアイデアです。
使用表格来实现垂直居中,再使用margin: 0 auto;来实现水平居中。
具体操作步骤如下:
1.设置父元素为块级表格;
2.设置子元素为表格单元格;
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中;
4.设置子元素中的内容的宽度,添加margin: 0 auto;属性,使子元素水平居中。
4.3長所と短所:
优:
1.内容高度自适应;
2.如果子元素的内容溢出,会拉伸父元素的高度;
3.兼容性好,兼容到IE8;
缺:
1.完成一个垂直居中效果,需要3个html元素;
第五に、インライン・ブロックを使用
これはまた、水平垂直方向中心の一般的な方法であるが、問題があるだろう:コンテンツ幅は容器-0.25emの幅よりも大きい場合、コンテンツの先頭にメソッド移動が発生し、この小さなを避けるために、いくつかのスキルを必要とします質問。
5.1具体的なコードは以下のとおり
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Inline {
text-align: center;
overflow: auto;
}
.container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
background-color: greenyellow;
padding: 20px;
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
<div class="container is-Inline">
<div class="Center-Block">
使用inline-block完成水平垂直居中
</div>
</div>
5.2この方法の核となるアイデアは、次のとおりです。
和table有点类似,设置内容为inline-block块,设置vertical-align: middle;属性使元素垂直方向居中,再父容器设置text-align:center;使子元素水平方向居中;
5.3長所と短所:
优:
1.内容高度自适应;
2.如果子元素的内容溢出,会拉伸父元素的高度;
3.兼容性好,兼容到IE7;
缺:
1.依赖margin-left:-0.25em来矫正水平方向居中的误差;
2.内容的宽度必须小于容器的宽度减去0.25em。
第六に、使用のフレキシボックス
現在のレイアウト弾性移動終了人気のレイアウトがあり、それは非常にエレガントな仕上がり垂直方向と水平方向のセンタリング効果することができます。
6.1具体的なコードは次のよう:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.center_block {
background-color: wheat;
padding: 20px;
}
<div class="container is-Flexbox">
<div class="center_block">
使用flexbox完成水平垂直居中
</div>
</div>
6.2この方法の核となるアイデアは、次のとおりです。
使用弹性布局,align-items: center;使元素在侧轴方向居中(默认是垂直方向),justify-content: center;使元素在主轴方向居中(默认是水平方向);
6.3長所と短所:
优:
1.内容宽度、高度自适应,即便文本溢出也很优雅;
2.可以使用很多弹性布局的新特性;
缺:
1.兼容性比较差,目前只有IE10以上兼容;
2.需要写额外的兼容性前缀;
3.各个浏览器的表现可能会有一些差异;