实现水平以及垂直居中的几种方法

最新推荐文章于 2024-09-12 09:36:00 发布

沐昀Iris

最新推荐文章于 2024-09-12 09:36:00 发布

阅读量798

点赞数

分类专栏：前端 css 文章标签： css flex

本文链接：https://blog.csdn.net/qq_43620719/article/details/112610911

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

行内元素和文本的水平垂直居中

有下述代码，效果如图

 <div class="wrap">
    <span>水平垂直居中</span>
  </div>

	.wrap{
      height: 400px;
      background-color: tomato;
    }

在这里插入图片描述

行内元素水平居中方法：text-align：center;

 .wrap{
      height: 400px;
      background-color: tomato;
      text-align: center;
    }

效果如下：
在这里插入图片描述

只有一行内容的元素行内元素垂直居中：设置行高等于容器高度 line-height = height

 	.wrap{
      height: 400px;
      background-color: tomato;
      line-height: 400px;
    }

效果如图
在这里插入图片描述

水平垂直居中，只适合一行内容

	 .wrap{
      height: 400px;
      background-color: tomato;
      line-height: 400px;
      text-align: center;
    }

在这里插入图片描述

块级元素水平垂直居中

<div class="wrap">
    <div>水平垂直居中</div>
    <div>水平垂直居中</div>
  </div>

1.单行内容水平垂直居中

将块级元素转化成行内块级元素，使用行内元素水平垂直居中方法

   .wrap{
      height: 400px;
      background-color: tomato;
      line-height: 400px;
      text-align: center;
    }
    .wrap>div{
      display: inline-block;
    }

在这里插入图片描述

2.已知宽高元素水平垂直居中

  <div class="wrap">
    <div class="box">
    </div>
  </div>
   .wrap{
      height: 400px;
      background-color: tomato;
    }
    .box{
      width: 200px;
      height: 160px;
      background-color: wheat;
    }

在这里插入图片描述

已知宽度水平居中 margin：0 auto

   .wrap{
      height: 400px;
      background-color: tomato;
    }
    .box{
      width: 200px;
      height: 160px; //水平居中可不设置高度
      background-color: wheat;
      margin: 0 auto;
    }

在这里插入图片描述

绝对定位加margin实现水平垂直居中

   .wrap{
      height: 400px;
      background-color: tomato;
      position: relative;
    }
    .box{
      width: 200px;
      height: 160px;
      background-color: wheat;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom: 0;
      margin: auto;
    }

在这里插入图片描述

3.未知高度元素水平垂直居中

   <div class="wrap">
    <div class="box">
      111111111111111<br>
      222222222222222<br>
      333333333333333<br>
      444444444444444
    </div>
  </div>

   .wrap{
      height: 400px;
      background-color: tomato;
    }
    .box{
      width: 200px;
      background-color: wheat;
    }

box的高度由其内容自然撑开
在这里插入图片描述

绝对定位+偏移实现水平垂直居中

  .wrap{
      height: 400px;
      background-color: tomato;
      position: relative;
    }
    .box{
      width: 200px;
      background-color: wheat;
      position: absolute;
      left:50%;
      top:50%;
    }

元素并未居中
在这里插入图片描述
此时元素向下偏移一半，向右偏移一半，当P1点和P2点重合时，元素水平垂直居中，需将元素再向上移动自身高度的一半，向左移动自身宽度的一半,使用偏移transform: translate();

  .wrap{
      height: 400px;
      background-color: tomato;
      position: relative;
    }
    .box{
      width: 200px;
      background-color: wheat;
      position: absolute;
      left:50%; /* 百分比相对于最近一个非static定位的祖先元素，此处为其父元素*/
      top:50%; /* 百分比相对于最近一个非static定位的祖先元素，此处为其父元素*/
      transform: translate(-50%,-50%);  /* 百分比相对于元素自身的宽高*/
    }

在这里插入图片描述

水平居中

 .box{
      width: 200px;
      background-color: wheat;
      position: absolute;
      left:50%; /* 百分比相对于最近一个非static定位的祖先元素，此处为其父元素*/
      transform: translateX(-50%);  /* 百分比相对于元素自身的宽高*/
    }

垂直居中

 .box{
      width: 200px;
      background-color: wheat;
      position: absolute;
      top:50%; /* 百分比相对于最近一个非static定位的祖先元素，此处为其父元素*/
      transform: translateY(-50%);  /* 百分比相对于元素自身的宽高*/
    }

弹性布局flex实现水平垂直居中

 .wrap{
      height: 400px;
      background-color: tomato;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box{
      width: 200px;
      background-color: wheat;
    }

在这里插入图片描述