2020-08-06

今日笔记

垂直居中：
1.flex布局：
在父元素中添加 以下代码

//  flex为弹性布局
//  align-items:  定义项目在交叉轴上如何对齐。设为center为垂直居中对齐
//  justify-content：定义了项目在主轴上的对齐方式。 center为主轴上对齐方式。 这样即可实现
   display: flex;
   align-items: center;
   justify-content: center;

详细的弹性布局看下面的链接
链接:
https://www.runoob.com/w3cnote/flex-grammar.html
2.display:flex实现CSS垂直居中:
在父元素中：

 display: flex;

在子元素中：

align-self: center;

这样也可实现居中。

3、使用定位：
父元素使用相对定位，子元素使用绝对定位，然后通过设置子元素的top来改变。

4.当要垂直的元素是单行文本框时，可以通过设置line-height: 100px;也可以实现垂直居中。