行内元素、块级元素居中

最新推荐文章于 2024-07-25 12:03:50 发布

喵_美

最新推荐文章于 2024-07-25 12:03:50 发布

阅读量271

点赞数 5

分类专栏： CSS效果文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_34708564/article/details/140238688

版权

CSS效果专栏收录该内容

15 篇文章 0 订阅

订阅专栏

行内元素居中

水平居中

{text-align：center;}

垂直居中

单行——行高等于盒子高度

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            /* 行高等于盒子高度：line-height: 200px; */
            line-height: 200px;
            background-color: pink;
        }
        .son {

        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son">我是行内元素，我想垂直居中</span>
    </div>
</body>

垂直居中：多行——display:table-cell、vertical-align: middle

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            /* 主要代码：display: table-cell; vertical-align: middle;*/
            display: table-cell;
            background-color: pink;
            vertical-align: middle;
        }
        .son {

        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son">我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。</span>
    </div>
</body>

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

多行文字水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .parent{
            display: table;
            width: 400px;
            height: 400px;
            text-align: center;
            border:1px solid red;
        }
        .child{
            display: table-cell;    /*子元素成为表格单元格（类似 <td> 和 <th>）*/
            background: yellow;
            vertical-align: middle; /*表格容器可以设置垂直对齐属性*/
            white-space: pre-line;/* 合并空白符序列，但是保留换行符。 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            33  22
            多行居中    达到
        多行居中
        多行居中
        多行居中
        多行居中
        </div>
    </div>
 
</body>
</html>

在这里插入图片描述

块级元素居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

水平居中

使用margin

 { width:960px; margin:0 auto;}

使用定位

盒子宽高已知， position: absolute; left: 50%; margin-left:-自身一半宽度;

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 50%;
            /* 如果元素没有设置宽度，不能使用margin-left，可以使用transform: translateX(-50%); 效果相同*/
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想水平居中。</div>
    </div>
</body>
</html>

使用flex

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: center;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想水平居中。</div>
    </div>
</body>
</html>

垂直居中

使用定位

盒子宽高已知， position: absolute; top: 50%; margin-top:-自身一半高度;

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            /* 如果元素没有设置高度，不能使用margin-top，可以使用transform: translateY(-50%); 效果相同*/
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想垂直居中。</div>
    </div>
</body>
</html>

使用flex

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            display: flex;
            align-items: center;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想垂直居中。</div>
    </div>
</body>
</html>

水平垂直居中

使用定位

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位 水平垂直居中</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .box {
      position: absolute;
      top: 50%;
      margin-top: -50px;
      left: 50%;
      margin-left: -50px;
      /* transform: translate(-50%, -50%); */
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

这种方法不推荐，因为当盒子宽高不是偶数的时候，一般会出现小数点，推荐使用以下方式，比较省事，让浏览器自己去计算。

让外边距自动拉扯元素位置进行平衡

设置 margin为 auto
top left right bottom 四个方向设置为0
让外边距自动拉扯元素位置进行平衡

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位 定位居中</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 113px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

使用flex

.container {
	height: 100vh; /*使容器高度为100视口高度，使容器占据整个屏幕 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.content {
	background-color: #cccccc;
	width:20 px;
	height: 20px;
}

喵_美

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
行内元素、块级元素居中

盒子宽高已知， position: absolute;left: 50%;margin-left:-自身一半宽度;盒子宽高已知， position: absolute;margin-top:-自身一半高度;这种方法不推荐，因为当盒子宽高不是偶数的时候，一般会出现小数点，推荐使用以下方式，比较省事，让浏览器自己去计算。
复制链接

扫一扫

专栏目录