css片居中(水平居中和垂直居中),css 水平居中 垂直居中 水平垂直居中

图片水平垂直居中

如下图所示

1.使用text-align: center配合line-height完成水平垂直居中

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;text-align: center;line-height: 300px;}.vertical>img{margin-top: calc((300px - 100px)/2);width: 100px; height: 100px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>

2.使用text-align: center配合position: absolute完成水平垂直居中

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;text-align: center;position: relative;}.vertical>img{position: absolute;top: 50%;margin-top: -50px;width: 100px; height: 100px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>

3.使用text-align: center配合display: flex完成水平垂直居中

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;text-align: center;display: flex;align-items: center;}.vertical>img{margin: 0 auto;width: 100px; height: 100px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>

4.使用text-align: center配合display: table完成水平垂直居中

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;display: table;}.vertical>div{display: table-cell;vertical-align: middle;text-align: center;}.vertical>div>img{width: 100px;height: 100px;}<!-- HTML --><div class="vertical"><div><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div></div> 图片垂直居中

如下图所示

1.使用display: flex完成垂直居中

/* CSS */.vertical{width: 100%;height: 300px;background-color: #ddd;display: flex;align-items: center;}.vertical>img{width: 100px;height: 100px;}<!-- HTML--><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>
2.使用绝对定位完成垂直居中 /* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;position: relative;}.vertical>img{width: 100px;height: 100px;position: absolute;top: 50%;margin-top: -50px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>
3.使用display: table完成垂直居中 /* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;display: table;}.vertical>div{display: table-cell;vertical-align: middle;}.vertical>div>img{width: 100px;height: 100px;}<!-- HTML --><div class="vertical"><div><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div></div>

4.使用line-height完成垂直居中

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;line-height: 300px;}.vertical>img{margin-top: calc((300px - 100px)/2);width: 100px;height: 100px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div> 图片水平居中

如下图所示

1.使用text-align: center完成水平居中(如若不行在img属性加上margin:0 auto)

/* CSS */.vertical{width: 100%;height:300px;background-color: #ddd;text-align: center;}.vertical>img{width: 100px;height: 100px;}<!-- HTML --><div class="vertical"><img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg"></div>
有什么问题欢迎评论留言，我会及时回复你的