如何垂直居中一个元素？

时间:2019-11-18 21:26 来源:未知作者:zengmumu 点击:次

　你会看到这个提示，那是因为你的系统无法识别某栏目的模型信息，或者你新建模型后，没为这个模型设计单独的模板。不同模型的文档浏览页的模板为：article_模型名字标识.htm 如“article_article.htm”，更多的信息你可以在频道模型管理的地方查看。

附加标题 内容：
模板调用标记：

题型:1单选，2多选，3填空，4问答，5排序 内容：
模板调用标记：

选项A 内容：
模板调用标记：

选项B 内容：
模板调用标记：

选项C 内容：
模板调用标记：

选项D 内容：
模板调用标记：

答案内容：
模板调用标记：

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  margin-top: -100px; /*设为高度的1/2*/
  margin-left: -100px; /*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto; /*很关键的一步*/
  position: absolute; /*父元素需要相对定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /*让四个定位属性都为0*/
}

方法四：flex 布局居中

body {
  display: flex; /*设置外层盒子display为flex*/
  align-items: center; /*设置内层盒子的垂直居中*/
  justify-content: center; /*设置内层盒子的水平居中*/
  .content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
  }
}

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

.content {
  //img的容器设置如下
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

难度：1入门级，2初级，3中级，4高级 内容：
模板调用标记：

专业分类 内容：
模板调用标记：

(责任编辑：zengmumu)

如何垂直居中一个元素？

时间:2019-11-18 21:26 来源:未知 作者:zengmumu 点击:次

时间:2019-11-18 21:26 来源:未知作者:zengmumu 点击:次