元素居中的方法

最新推荐文章于 2021-08-12 19:22:16 发布

luckysangchenshi

最新推荐文章于 2021-08-12 19:22:16 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/luckysangchenshi/article/details/102414941

版权

1.text-align和line-hight结合

适合单行文字的垂直居中

<style>
  .wrap {
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: hotpink;
  }
</style>
<div class="wrap">
  hello world
</div>

2.margin-top和margin-left

已知父元素和子元素的宽高，通过计算margin-top和margin-left的值来实现垂直居中

缺点：父盒子和子盒子任意一个的宽高改变，都不能实现元素居中，还要解决垂直塌陷问题

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    width: 500px;
    height: 350px;
    background-color: yellow;
    overflow: hidden;
  }

  .inner {
    width: 200px;
    height: 200px;
    margin-top: 75px;
    margin-left: 150px;
    background-color: hotpink;
  }
</style>

<body>
  <div class="wrap">
    <div class="inner">
    </div>
  </div>
</body>

3.position:absolute绝对定位

父级元素的宽高不要求，但需要知道子元素的宽高，通过定位和margin负值进行偏移的方法。

缺点：子元素的宽高发生改变，就要重新设置，如果没有定位的父级元素，那么相对于整个窗口；如果有定位的父级元素，就相对于定位的父级元素垂直居中。

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .inner {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    background-color: hotpink;
  }
</style>

<body>
  <div class="wrap">
    <div class="inner">
    </div>
  </div>
</body>

4 position:fixed固定定位

将一个已知宽高的盒子在整个窗口中垂直居中，常用的登录框操作

缺点：这个只是相对于整个窗口

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .inner {
    position: fixed;
    width: 300px;
    height: 200px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: hotpink;
  }
</style>

<body>
  <div class="wrap">
    <div class="inner">
    </div>
  </div>
</body>

5 .position:absolute绝对定位结合transform

css3提供了translate函数，通过transform属性，实现位移,父元素和子元素宽高都是未知，适用于内容流

缺点：绝对定位，会受到定位父级元素的影响，IE9以下不支持

<style>
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="wrap">
  <div class="inner">
    hello world
  </div>
</div>

6.vw、vh和translate

vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%，vh和vw只能从窗口的大小去考虑，不适合正常的文本流，做全屏应用时有用。

<style>
.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}
</style>
<div class="wrap">
  <div class="inner">
   hello world
  </div>
</div>

7. 伸缩布局

CSS3新增属性，父级元素设置垂直居中样式后，里面的容器会垂直居中及内容会垂直居中显示。

<style>
  * {
    margin: 0;
    padding: 0;
  }
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<div class="wrap">
  <div class="inner">
   hello world
  </div>
</div>

8. display:table和diaplay:table-cell

table具有垂直居中的属性，要实现水平垂直居中，需要设置子元素.inner的宽高，任意宽高都能保证内容垂直水平居中显示。

<style>
.wrap {
  display: table;
}
.inner {
  display: table-cell;
  vertical-align:middle;
  text-align:center;
}
</style>
<div class="wrap">
  <div class="inner">
  hello world
  </div>
</div>
</style>

9 :before和display:inline-block

这也是一种处理方式，通过伪类:before在元素内增加新元素后在用display:inline-block，给.container伪类:before设定为height:100%，这样可以用一个伪元素在.container获得与父元素等高的空间。然后用inline-block和vertical-align: middle改变对齐的基线，这样实现说平居中

缺点：要垂直居中，父元素还是要设置高度

<style>
.wrap{
    text-align: center;
}
.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.inner {
    display: inline-block;
}
</style>
<div class="wrap">
    <div class="inner">
        hello world
    </div>
</div>

参考链接：https://www.tangshuang.net/3197.html

luckysangchenshi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
元素居中的方法

1.text-align和line-hight结合适合单行文字的垂直居中<style> .wrap { height: 50px; text-align: center; line-height: 50px; background-color: hotpink; }</style><div class="wrap"...
复制链接

扫一扫