水平垂直居中
居中元素定宽高:
1. absolute + margin auto
代码实现:
<div class="outer">
<div class="inner size"></div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
}
.size{
width: 100px;
height: 100px;
background: pink;
}
.inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
优点:兼容性好,可读性强
缺点:需要知道子元素宽高
2. absolute + 负margin
代码实现:
<div class="outer">
<div class="inner size"></div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
}
.size{
width: 100px;
height: 100px;
background: pink;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
优点:兼容性好,可读性强
缺点:需要知道子元素宽高
3. absolute + calc
代码实现:
<div class="outer">
<div class="inner size"></div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
}
.size{
width: 100px;
height: 100px;
background: pink;
}
.inner {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
优点:可读性强
缺点:
- 兼容性依赖calc的兼容性,只支持IE9以上;
- 需要知道子元素高度
居中元素不定宽高:
1. absolute + transform
代码实现:
<div class="outer">
<div class="inner">inner</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: pink;
}
优点:可读性强;实现简单,易于理解;子元素不需要定宽高
缺点:兼容性依赖transform的兼容性,只支持IE9以上;
2. table
代码实现:
<table>
<tbody>
<tr>
<td class="outer">
<div class="inner">inner</div>
</td>
</tr>
</tbody>
</table>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
text-align: center;
}
.inner {
display: inline-block;
background: pink;
}
优点:子元素不需要定宽高,兼容性好
缺点:不属于table的正常用法,冗余代码比较多;
3. css-table
代码实现:
<div class="outer css-table">
<div class="inner">inner</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
}
.css-table {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner {
display: inline-block;
background: pink;
}
优点:子元素不需要定宽高,兼容性好,和上面table原理一样
缺点:
4. line-height
代码实现:
<div class="outer">
<div class="inner">inner</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
line-height: 300px;
text-align: center;
}
.inner {
background: pink;
display: inline-block;
line-height: initial;
}
优点:子元素不需要定宽高,兼容性好
缺点:子元素内需要纠正line-height和text-align
5. flex
代码实现:
<div class="outer">
<div class="inner">inner</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: pink;
}
优点:子元素不需要定宽高,可读性强
缺点:兼容性依赖flex
6. grid
代码实现:
<div class="outer">
<div class="inner">inner</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
display: grid;
}
.inner {
background: pink;
justify-self: center;
align-self: center;
}
优点:子元素不需要定宽高,可读性强
缺点:兼容性依赖grid,相比来说grid兼容性不如flex
7. writing-mode
emmm这是我第一次看到这个属性
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
语法格式如下:
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr:垂直方向内内容从上到下,水平方向从左到右
sideways-rl:内容垂直方向从上到下排列
sideways-lr:内容垂直方向从下到上排列
代码实现:
<div class="outer">
<div class="vt">
<div class="inner">inner</div>
</div>
</div>
.outer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #999;
writing-mode: vertical-lr;
text-align: center;
}
.vt{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.inner {
background: pink;
margin: auto;
display: inline-block;
}
这种方式理解起来比较复杂,代码也有点复杂。
参考文章:
CSS实现水平垂直居中的1010种方式
原文网址:http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
原文作者:@颜海镜,他的博客 http://yanhaijing.com