css居中那点事 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居中那点事

推荐阅读

永嘉风光永嘉哪里好玩

劳动是意思相近的词吗快乐是意思相近的词语吗

没开封茶叶会不会过期

迷你世界手机版怎么去竹桃林桃林地形码迷你世界分享

画图工具怎么手绘一款简笔画蛋糕？画图工具手绘简笔画蛋糕的方法

win10epic遭遇了网络连接问题解决方法

荷包蛋面条怎么做荷包蛋面条怎么做视频

4s店样品车可以买吗现在 4s店样品车可以买吗

汽车新四化是什么谈谈汽车新四化

聪明的梅花鹿告诉了我们什么道理一只梅花鹿告诉我们什么道理

周公解梦梦见骨灰盒是什么意思梦见骨灰盒好不好

皮肤瘙痒冷敷多久最好

毛衣可以和其他衣服一起用洗衣机洗吗

十一岁的男孩怎么教育

win101909声卡没声音解决方法

3dmax怎么做雪景关于3DMAX制作雪景的详细操作

品牌规划的流程

手机里库乐队删了怎么办手机库乐队没了怎么办

准备从事棋牌游戏人员必读

审议不通过怎么写会议纪要如何写会议纪要