css 水平垂直居中样式设计，当做笔记记之。
图片水平居中
- html样式
1
2
3
<div class="create">
<img src="../../assets/icon_add.png" class="icon_add">
</div>
- css样式
1
2
3
4
5
6
.create{
width: 350px;
height: 300px;
background: rgba(0, 149, 232, 0.1);
text-align: center;
}
图片垂直居中
- html样式
1
2
3
<div class="create">
<img src="../../assets/icon_add.png" class="icon_add">
</div>
- css样式
1
2
3
4
5
6
7
.create{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center
}
图片水平垂直居中
- html样式
1
2
3
<div class="create">
<img src="../../assets/icon_add.png" class="icon_add">
</div>
- css样式
1
2
3
4
5
6
7
8
.create {
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}
文本水平居中
- html样式
1
2
3
<div class="create">
你好啊
</div>
- css样式
1
2
3
4
5
6
.create {
width: 400px;
height: 300px;
background-color: #ffd04b;
text-align: center;
}
文本垂直居中
- html样式
1
2
3
<div class="create">
你好啊
</div>
- css样式
1
2
3
4
5
6
.create {
width: 400px;
height: 300px;
background-color: #ffd04b;
line-height: 300px;
}
文本水平垂直居中
- html样式
1
2
3
<div class="create">
你好啊
</div>
- css样式
1
2
3
4
5
6
7
.create {
width: 400px;
height: 300px;
background-color: #ffd04b;
line-height: 300px;
text-align: center;
}
