CSS 盒子居中详解

木森林哥哥

已于 2022-07-28 14:05:18 修改

阅读量6k

点赞数 7

分类专栏： Html/CSS 文章标签： css html flex html5 css3

于 2020-11-27 20:13:19 首次发布

本文链接：https://blog.csdn.net/weixin_47021982/article/details/110244922

版权

Html/CSS 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

我们在做web练习或项目的时候，经常会碰到盒子居中问题，今天给大家总结了几种方法，希望能有所帮助！

居中目录

1. 内容水平居中

text-align: center

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容水平居中</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
            好好学习，天天向上！
    </div>
</body>
</html>

显示：
在这里插入图片描述

2. 一行文字垂直居中

line-height=height

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行文字垂直居中</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /* text-align: center; */
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
            好好学习，天天向上！
    </div>
</body>
</html>

显示：
在这里插入图片描述

3. 盒子水平居中

margin: 0 auto;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子水平居中</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示：
在这里插入图片描述

4. 子元素在父元素中居中

4.1 子元素在父元素中居中-弹性盒子

方法一：弹性盒子
display: flex; /* 弹性盒子 */
justify-content: center; /水平居中/
align-items: center; /垂直居中/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-弹性盒子</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            display: flex; /* 弹性盒子 */
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.2 子元素在父元素中居中-table-cell

方法二：table-cell
父元素：display: table-cell; /以列来排布/ vertical-align: middle; 垂直居中
子元素：margin: 0 auto 水平居中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-table-cell</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            display: table-cell; /*以列来排布*/
            vertical-align: middle;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.3 子元素在父元素中居中-绝对定位

方法三：绝对定位
父元素：position: relative;
子元素：position: absolute;
left: 50%;
top: 50%;
margin-left: 减去自身的的一半; /如200px, 就减去100px/
margin-top: 减去自身的一半；/如200px, 就减去100px/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-绝对定位</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }

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

</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.4 子元素在父元素中居中-transform

方法三：使用transform

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    #f {
      background-color: red;
      width: 500px;
      height: 500px;
      position: relative;
    }

    #z {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

在这里插入图片描述

—Ending—

木森林哥哥

关注

7
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
CSS 盒子居中详解

我们在做web练习或项目的时候，经常会碰到盒子居中问题，今天给大家总结了几种方法，希望能有所帮助！居中目录1. 内容水平居中2. 一行文字垂直居中3. 盒子水平居中4. 子元素在父元素中居中4.1 子元素在父元素中居中-弹性盒子4.2 子元素在父元素中居中-table-cell4.3 子元素在父元素中居中-绝对定位1. 内容水平居中text-align: center代码：<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫