CSS篇-面试题2-如何让一个长度未知的图片水平和垂直方向均居中

itclanCoder

发布于 2020-10-28 16:55:40

1.3K0

文章被收录于专栏：itclanCoderitclanCoder

前言

元素水平垂直居中是 web 开发中常见遇到的问题

方法 1-使用transform + absolute

这个组合，常用于图片的居中显示，子元素设置绝对定位,父级元素相对定位,也可以将父元素 ·wrapper的相对定位，移入子元素img中，替换掉绝对定位。效果也是一样的

html 示例代码

<div class="wrapper">
  <img src="test.png" />
</div>

css 示例代码

.wrapper {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}
.wrapper > img {
  position: absolute; // 子元素绝对定位
  left: 50%; // left值50%
  top: 50%; // top值50%
  transform: translate(
    -50%,
    -50%
  ); // 利用transform变换,translate平移,水平,垂直方向上
}

方法 2-利用-table-cell

利用 table的单元格居中效果展示。与 flex一样，需要写在父级元素上

<div class="wrapper">
  <p>itclanCoder元素水平垂直居中</p>
</div>

css代码

.wrapper {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

方法 3-使用弹性flex布局

在实际开发中,很多元素的高度,宽度是不固定的,随着自身的内容撑大而撑大的,怎么让它在页面中实现水平垂直居中显示呢?

html 标签

<div class="wrapper flex-center">
  <p>itclanCoder元素水平垂直居中</p>
</div>

css 层叠样式

.wrapper {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}

.flex-center {
  //在父级元素中,添加如下代码即可
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
}

更多元素水平垂直居中https://coder.itclan.cn/fontend/css/css-base-elem-center/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-08-26，如有侵权请联系 cloudcommunity@tencent.com 删除

css