CSS|垂直居中（两方向，四方法，条条大路通罗马）
垂直居中常见的四种方法总结 两条路，即 flex box 或者 绝对定位。
【CSS|垂直居中（两方向，四方法，条条大路通罗马）】四种方法，分别如下：
方向一： flex box
#container{
display: flex;
justify-content: center;
align-items: center;
}
方向二：绝对定位 2.1 先把顶点移动到中心，再挪回自身长宽的一半（transform-translate）
#container{
...
position:relative;
}
#center{
...
position:absolute;
top:50%;
left:50%;
// 这三行，使得小方块的顶点（左上）相对于大方块的顶点居中了。transform: translate(-50%,-50%);
// transform 的 translate 属性是相对于自身的， 顶点已经居中了，再相对自身往回移动一般，就把中心移到原来顶点所处的中心了。这样整个图形就居中了。
}
2.2 先把顶点移动到中心，再挪回自身长宽的一版（直接用计算宽度并用负 margin）
#container{
...
position: relative;
}
#center{
position: absolute;
top: 50%;
left: 50%;
// 同上margin: -50px;
// 与上面同理。只不过是用 -margin 往回找，这个数字分别是一半的高度 和 一半的宽度;
需要知道自身宽度
}
2.3 横竖两个两边都是 margin 为 0 的居中
#container{
...
position: relative;
}
#center{
position: absolute;
margin:auto;
// 相当于两个两边都是 0 的 margin 居中
top: 0;
bottom: 0;
left: 0;
right: 0;
}推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 3.css浮动
- 建立垂直阅读才是最重要的
- 垂直农场101-室内农业入门知识
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- CSS兼容性笔记
- 微信小程序____CSS篇之定位（position）及浮动（float）
- 18，页面优化