css实现水平和垂直居中

编程入门行业动态更新时间:2024-10-14 14:22:08

一.水平居中

1.内联级元素（inline或者是line_*）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      text-align: center;
    }
  </style>
</head>
<body>
  <p>居中内联级元素</p>
</body>
</html>

2. 块级元素

实现单个块级元素居中，仅需要设置margin-left和margin-right为auto即可，但是前提条件是元素必须设置了宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div{
     width: 500px;
     margin: 0 auto;
   }
  </style>
</head>
<body>
  <div>我是块级元素</div>
</body>
</html>

实现多个块级元素水平居中

如果使用元素的margin属性是无法实现让元素在一行居中的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div{
     width: 500px;
     margin: 0 auto;
   }
  </style>
</head>
<body>
  <div>我是块级元素Ⅰ</div>
  <div>我是块级元素Ⅱ</div>
  <div>我是块级元素Ⅲ</div>
</body>
</html>

我们尝试使用display属性，设置为inline-block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
      }

      main {
        background: white;
        margin: 20px 0;
        padding: 10px;
      }

      main div {
        background: black;
        color: white;
        padding: 15px;
        max-width: 125px;
        margin: 5px;
      }

      .inline-block-center {
        text-align: center;
      }
      .inline-block-center div {
        display: inline-block;
        text-align: left;
      }
    </style>
  </head>
  <main class="inline-block-center">
    <div>
      我是内联块级元素Ⅰ
    </div>
    <div>
      我是内联块级元素Ⅱ
    </div>
  </main>
</html>

二、垂直居中

1. inline或是inline-*

单行

实现方式一：上下填充，相同的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      background-color: aqua;
      padding-top: 40px;
      padding-bottom: 40px;
    }
  </style>
</head>

<body>
  <p>我是内联级元素</p>
</body>
</html>

实现方式二：line-height等于height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      background-color: aqua;
      height: 100px;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <p>我是内联级元素</p>
</body>
</html>

多行

实现方式一：处理多行文本居中也可以使用上下填充相同距离的方式，如果不行，我们可以使用vertical-align属性实现多行文本居中。div是p元素的父亲

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background-color: red;
    }
    p{
      display: inline-table;
      background-color: aqua;
      width: 80px;
    }
  </style>
</head>
<body>
  <div>
    <p>内联元素实现居中效果，使用vertical-align的方式实现垂直居中</p>
  </div>

  
</body>
</html>

实现方式二：flexbox弹性盒子的方式实现垂直布局（与方式一相同，div是p元素的父亲）

flex-direction: column;

justify-content: center;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 块级元素高度由子元素内容撑开 */
    div{
      background-color: red;
      width: 300px;
    }
    p{
      display: flex;
      background-color: aqua;
      flex-direction: column;
      justify-content: center;
      height: 300px;
      width: 180px;
    }
  </style>
</head>
<body>
  <div>
    <p>内联元素实现居中效果，使用flexbox的方式实现垂直居中</p>
  </div>
</body>
</html>

实现方式三： position属性实现居中效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 块级元素高度由子元素内容撑开 */
    div{
      position: relative;
      background-color: black;
    }
    /*全高的伪元素 */
    div::before{
      content: " ";
      display: inline-block;
      height: 100%;
      
      vertical-align: middle;
    }
    p{
      display: inline-block;
      background-color: aqua;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div>
    <p>内联元素实现居中效果，使用div的伪类元素的方式实现垂直居中</p>
  </div>
</body>
</html>

2. 块级元素

已知元素高度（父元素开启相对定位，子元素绝对定位）

.parent{
        position: relative;
      }
.child{
        position: absolute;
        height: 100px;
        top: 50%;
        /* 使用box-sizeing属性设置为border-box时 */
        margin-top: -50px;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
      }
      /* 黑色盒子相对于白色盒子实现了垂直居中 */
      main {
        background: white;
        height: 300px;
        margin: 20px;
        width: 300px;
        position: relative;
      }
      
      main div {
        position: absolute;
        top: 50%;
        /* left: 20px;
        right: 20px; */
        height: 100px;
        margin-top: -70px;
        background: black;
        color: white;
        padding: 20px;
        /* margin-top: -50px; */
      }
    </style>
  </head>
  <body>
    <main>
      <div>
        我是拥有固定高度的块级元素
      </div>
    </main>
  </body>
</html>

未知元素高度

可以通过先把元素的高度设置为父元素高度的一半，然后再推高translateY(-50%)的方式将元素进行垂直居中设置。

.parent{
        position: relative;
      }
.child{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
      }
      /* 黑色盒子相对于白色盒子实现了垂直居中 */
      main {
        background: white;
        height: 300px;
        margin: 20px;
        width: 300px;
        position: relative;
      
      }
      main div {
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        background: black;
        color: white;
        padding: 20px;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <main>
      <div>我是位置的块级元素</div>
    </main>
  </body>
</html>

利用gride方式实现块级元素垂直居中

将块级元素盒子的内容设置为垂直居中，如果不介意盒子被拉宽可以使用table的方式实现盒子的内容垂直居中

.parent{
        display: table;
      }
.child{
        display: table-cell;
        vertical-align: middle;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
      }
      /* 黑色盒子相对于白色盒子实现了垂直居中 */
      main {
        background: white;
        height: 300px;
        margin: 20px;
        width: 300px;
        display: table;
      }
      main div {
        display: table-cell;
        left: 20px;
        right: 20px;
        background: black;
        color: white;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <main>
      <div>我是未知高度的块级元素，使用表格布局的方式进行的实现</div>
    </main>
  </body>
</html>

弹性盒子实现垂直居中

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
      }
      /* 黑色盒子相对于白色盒子实现了垂直居中 */
      main {
        background: white;
        height: 300px;
        margin: 20px;
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
      }
      main div {
        left: 20px;
        right: 20px;
        background: black;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <div>我是未知高度的块级元素，使用弹性盒布局的方式进行的实现</div>
    </main>
  </body>
</html>

三. 水平垂直居中（两个方向上的居中实现）

1. 固定高度和宽度的元素

利用绝对定位来实现居中对齐，主要是设置margin的值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: #f06d06;
        font-size: 80%;
        padding: 20px;
      }

      main {
        position: relative;
        background: white;
        height: 200px;
        width: 60%;
        margin: 0 auto;
        padding: 20px;
        resize: both;
        overflow: auto;
      }

      main div {
        background: black;
        color: white;
        width: 200px;
        height: 100px;
        /* 左边：140/2  240/2*/
        /* margin：上，右，下，左 */
        margin: -70px 0 0 -120px;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <main>
      <div>我是已知高度和宽度的块级元素，通过绝对定位来实现垂直和水平居中</div>
    </main>
  </body>
</html>

2. 未知高度和宽度的元素

在未知高度和宽度的情况下，可以使用transform属性在两个方向上的负平移实现居中对齐

 .parent{
    position: relative;
  }
  .child{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    background-color: yellow;
    font-size: 80%;
  }
  main{
    background-color: darkblue;
    position: relative;
    height: 300px;
  }
  main div{
    background-color: aliceblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    transform: translateY(-50%);
  }
</style>
<body>
  <main>
    <div>
      我是未知高度和宽度的div元素
    </div>
  </main>
</body>
</html>

3. 利用弹性盒子实现

justify-content:该属性主要是用于分配弹性盒子主轴的空白部分

align-items:该属性主要用于控制元素在辅轴上的对齐方式

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. 用网格实现

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body,html{
    height: 100%;
    display: grid;
  }
  div{
    margin: auto;
  }

</style>
<body>
    <div>
      hahahha
    </div>
</body>
</html>

ps：若是html和body的高度，则不能实现垂直居中

更多推荐

css实现水平和垂直居中

本文发布于:2023-06-13 12:16:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1381913.html