div在另一个div里垂直居中的示例介绍

来源：懂视网责编：小采时间：2020-11-27 18:52:54

div在另一个div里垂直居中的示例介绍

div在另一个div里垂直居中的示例介绍:基础知识：div在另一个div里垂直居中方法一：.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: abso

推荐度：

点击下载本文 文档为doc格式

导读div在另一个div里垂直居中的示例介绍:基础知识：div在另一个div里垂直居中方法一：.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: abso

基础知识：div在另一个div里垂直居中

方法一：

.parent {
  width:800px;
  height:500px;
  border:2px solid #000;
  position:relative;
 }
 .child {
  width:200px;
  height:200px;
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
  background-color: red;
}

方法二：

.parent {
  width:800px;
  height:500px;
  border:2px solid #000;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  }
 .child {
  width:200px;
  height:200px;
  display:inline-block;
  background-color: red;
  }

方法三：

.parent {
  width:800px;
  height:500px;
  border:2px solid #000;
  display:flex;
  justify-content:center;
  align-items:center;
 }
 .child {
  width:200px;
  height:200px;
  background-color: red;
 }

方法四：

.parent {
  width:800px;
  height:500px;
  border:2px solid #000;
  position:relative;
 }
 .child {
  width:300px;
  height:200px;
  margin:auto;
  position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/
  left:50%;
  top:50%;
  margin-left: -150px;
  margin-top:-100px;
  background-color: red;
 }

更多div在另一个div里垂直居中的示例介绍相关文章请关注PHP中文网！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com