css居中那点事
使用css居中有很多种方式，在这里写几个最佳实践。代码简单粗暴，适用性强，让你不必这点小事烦恼，提升你的工作效率，早几分钟下班回家LOL岂不是美滋滋
**不多说废话，直接上代码**
* 基本的样式和布局
```
```
```
.container {
height: 200px;
width: 200px;
background: #369;
}
.inner {
height: 50px;
width: 50px;
background: #963;
}
```
文章图片
* 左右居中最简单的两种写法
```
左右居中1
左右居中2
```
```
.center1 {
text-align: center;
}
.center-inner1 {
display: inline-block;
}
.center2 {
display: flex;
justify-content: center;
}
.center-inner2 {
display: inline-block;
}
```
文章图片
* 垂直居中的两种最简单写法
```
垂直居中1
垂直居中2
```
```
.center3 {
display: flex;
align-items: center;
}
.center4 {
position: relative;
}
.center-inner4 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
```
文章图片
* 左右居中+垂直居中
```
左右居中+垂直居中
```
```
.center5 {
display: flex;
align-items: center;
justify-content: center;
}
```
文章图片
【css居中那点事】点个收藏关注一下不迷路
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 2019-08-29|2019-08-29 iOS13适配那点事
- 3.css浮动
- 肉奴和多肉的那点事儿
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- 二手房交易契税那点事儿
- CSS兼容性笔记
- 微信小程序____CSS篇之定位（position）及浮动（float）