小墨の博客

梦想需要付诸行动,否则只能是梦

子div在父div里居中

子div在父div里居中
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son">1111</div>
        </div>
    </body>
</html>

1. 方法一(使用绝对布局): 这种方式的弊端是:必须要知道这个容器的长宽,因为在子元素中的    margin-top:-100px;    margin-left:-100px; 这两个样式分别是子元素长、宽的一半。

.father {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: red;
}
 
.son {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background-color: black;
}


2. 万能方式二:仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。//这种方式很好的避免了方式一的弊端,不需要知道自己的长宽,一样可以定位到中间

.father{
  width: 1000px;
  height: 600px;
  position: relative;
  background-color: red;
}
.son {
  background-color: #fff;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

 

3. 万能方法三(使用弹性布局flex)

这种方式比较通用:这样给父元素设置了三个样式display:flex;(弹性布局)    justify-content:center;(内容水平居中)   align-items:center; (内容垂直居中) 就可以达到水平、垂直居中的效果

.father {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.son {
  width: 200px;
  height: 200px;
  background-color: black;
} 

 

4. 方法四(使用绝对布局)

使用这种方式的要领是:子绝父相,且子元素要设置以下的样式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以达到居中效果

.father {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: red;
}
 
.son {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: black;
}



摘自:https://www.cnblogs.com/CatcherLJ/p/11171900.html

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:507
    • 页面总数:20
    • 分类总数:92
    • 标签总数:207
    • 评论总数:60
    • 浏览总数:219202

    | | |
    | |  Z-Blog PHP