CSS image centering method with variable size

CSS is an indispensable language for front-end development. This article mainly introduces the CSS centering example of the image centering method with a variable size. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Use table-cell to achieve vertical centering

##

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

2. Vertical centering method of multi-line text

Sometimes we may encounter situations where multi-line text needs to be vertically centered, but Sometimes it is a bit troublesome to do, and we need to change our thinking to achieve it.

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

Three ways to center images with CSS

How to center text and images in HTML code?

How to center the css image

The above is the detailed content of CSS image centering method with variable size. For more information, please follow other related articles on the PHP Chinese website!