当前位置:   article > 正文

使用 CSS 实现垂直居中的5种方法_css 定位垂直居中

css 定位垂直居中

在日常开发中,经常需要元素垂直居中或者水平居中,css水平垂直居中方法有很多种,下面列举几种常用的方法;
 

<div class="parent"><div class="children"></div></div>

父元素 .parent

子元素 .children

1、利用 flex 布局

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。Flex布局是现在最常用的一种布局方案,平时开发各种布局基本上可以flex一把梭。

给一个容器元素设置display:flex让它变成flex容器。

然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴默认水平,flex子元素默认会沿主轴排列,可以控制flex子元素在主轴上伸缩,主轴方向可以设置,相关的css属性分为两类,一类是给flex容器设置的,一类是给flex子元素设置

  1. /* 无需知道被居中元素的宽高 */
  2. .parent{
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. }

2、子元素是单行文本

 设置父元素的 text-alignline-height = height,这种方法适用于子元素为单行文本的情况。

  1. .parent{
  2. height: 100px;
  3. line-height: 100px;
  4. text-align: center;
  5. }

3、利用 absolute + transform

给子元素的position:absolute,再通过transform即可定位到垂直居中的位置。

  1. /* 无需知道被居中元素的宽高 */
  2. /* 设置父元素非 `static` 定位 */
  3. .parent {
  4. position: relative;
  5. }
  6. /* 子元素绝对定位,使用 translate的好处是无需知道子元素的宽高 */
  7. /* 如果知道宽高,也可以使用 margin 设置 */
  8. .children{
  9. position: absolute;
  10. left: 50%;
  11. top: 50%;
  12. transform: translate(-50%, -50%);
  13. }

4、利用 grid 布局

grid 布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。grid布局是将容器划分为行和列,产生单元格,然后指定项目所在的单元格,可以看作是二维布局。主流浏览器基本兼容

  1. /* 无需知道被居中元素的宽高 */
  2. .parent{
  3. display: grid;
  4. }
  5. .children {
  6. justify-self: center;
  7. align-self: center;
  8. }

5、利用绝对定位和 margin:auto

给子元素设置position:absolute绝对定位,然后分别设置left、top、right、botom的值为0,结合margin:auto实现垂直居中和水平居中。

  1. /* 无需知道被居中元素的宽高 */
  2. .children{
  3. position: absolute;
  4. left: 0;
  5. top: 0;
  6. right: 0;
  7. bottom: 0;
  8. margin: auto;
  9. }
  10. .parent{
  11. position: relative;
  12. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/702746
推荐阅读
相关标签
  

闽ICP备14008679号