Sail


手在键盘敲很轻


flex垂直居中

以前我们实现水平垂直居中,可以通过如下的代码段实现

1
2
3
4
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);

实现文本垂直居中也可以借助以下代码段实现

1
2
display: table-cell;
vertical-align: middle;

而使用flex可以更加简单的实现

若对flex不了解,可以看看我的博文Flex基础

这里介绍两种方式

HTML结构

1
2
3
4
5
<div>
<p>
1111111
</p>
</div>

方法一

CSS

1
2
3
4
5
6
7
8
9
10
div{
display: flex;
width: 200px;
height: 200px;
border: 10px solid red;
}

p{
margin: auto;
}

方法二

CSS

1
2
3
4
5
6
7
8
div{
display: flex;
width: 200px;
height: 200px;
background: red;
justify-content: center;
align-items: center;
}

方法二可以去掉p标签

© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬