元素居中的方法总结

目录

垂直居中

行内元素垂直居中

单行文本垂直居中

[1.line-height: 200px;](#1.line-height: 200px;)

多行文本垂直居中

1.table+vertical-align:middle

块级元素垂直居中

[1.display: flex;align-items: center;](#1.display: flex;align-items: center;)

[2.使用position + top +margin-top](#2.使用position + top +margin-top)

水平居中

行内元素水平居中

1.text-align:center

​编辑

块级元素水平居中

[1.margin: 0 auto;](#1.margin: 0 auto;)

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

块级元素垂直水平居中

1.position+transform

2.flexbox


垂直居中

行内元素垂直居中

单行文本垂直居中

1.line-height: 200px;

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div{
        width: 200px;
        border: 1px solid red;
        height: 200px;
      }
      span{
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div>
      <span> 垂直居中!</span>
    </div>
  </body>
</html>

多行文本垂直居中

1.table+vertical-align:middle

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div{
        width: 200px;
        border: 1px solid red;
        height: 200px;
        display: table;
      }
      span{
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div>
      <span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span>
    </div>
  </body>
</html>

2.flex+align-items

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div{
        width: 200px;
        border: 1px solid red;
        height: 200px;
        display: flex;
        align-items: center;
      }
      
    </style>
  </head>
  <body>
    <div>
      <span> 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!</span>
    </div>
  </body>
</html>

块级元素垂直居中

1.display: flex;align-items: center;

不是所有的浏览器都可以兼容

2.使用position + top +margin-top

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.out{
				width: 500px;
				height: 500px;
				background-color: skyblue;	
				position: relative;			
			}
			.in{
				width: 100px;
				height: 100px;
				background-color: salmon;
				position: absolute;
				top: 50%;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in"></div>
		</div>
	</body>
</html>

兼容性较好

让一个块级元素垂直居中的八种方法_块元素垂直居中__张张张i的博客-CSDN博客

水平居中

行内元素水平居中

1.text-align:center

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .parent {
        text-align: center;
    }
</style>
</head>
<body>
	<div class='parent'>
		<span>123</span>
	</div>
</body>
</html>

块级元素水平居中

1.margin: 0 auto;

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .child {
            background: skyblue;
            width:200px;
            height:200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class='parent'>
        <div class='child'></div>
    </div>
</body>
</html>

垂直水平居中

行内元素垂直水平居中

1.文本属性line-height+text-align

文本属性的话,如果你的行内元素是文本,你可以使用line-heighttext-align来实现水平和垂直居中

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .parent {
        width: 500px;
        height: 500px;
        background-color: aqua;
        text-align: center; /* 水平居中 */
        line-height: 500px; /* 垂直居中 */
    }
</style>
</head>
<body>
	<div class='parent'>
		<span>123</span>
	</div>
</body>
</html>

块级元素垂直水平居中

1.position+transform

.container 元素被设置为相对定位,以作为 .content 元素的定位参考。.content 元素被绝对定位到 .container 内,然后使用 top: 50%; left: 50%; 将其移动到容器的中心。最后,transform: translate(-50%, -50%); 用于微调元素的位置,使其完全居中。

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
  .container {
  position: relative;
  width: 100%;
  height: 100vh; /* 或者其他适当的高度 */
  background-color: aqua;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="container">
  <div class="content">要居中的内容</div>
</div>

</body>
</html>

使用 transform: translate(-50%, -50%); 是一种在垂直和水平方向上同时将元素居中的常用技巧。这是因为 transformtranslate 函数可以通过百分比单位相对于元素自身的尺寸进行计算。

让我们来解释一下为什么要使用 -50% 的情况:

  1. 水平居中(左右方向)

    • 当你设置 left: 50%; 时,元素的左侧边界会定位在容器的中心点位置。
    • 但元素的中心点不在容器的中心,而是位于元素自身的宽度的一半处。
    • 通过使用 transform: translateX(-50%);,元素会向左移动自身宽度的一半,从而将元素的中心点与容器的中心点对齐,实现水平居中。
  2. 垂直居中(上下方向)

    • 同样,当你设置 top: 50%; 时,元素的顶部边界会定位在容器的中心点位置。
    • 但元素的中心点不在容器的中心,而是位于元素自身的高度的一半处。
    • 通过使用 transform: translateY(-50%);,元素会向上移动自身高度的一半,从而将元素的中心点与容器的中心点对齐,实现垂直居中。

综合起来,transform: translate(-50%, -50%); 是将元素在水平和垂直方向上同时移动,使其中心点与容器的中心点对齐,从而实现元素的完全居中。

2.flexbox

html 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使容器铺满整个视口高度 */
    background-color: lightgray;
  }

  .content {
    display: inline-block; /* 将元素设置为行内块元素 */
    padding: 20px;
    background-color: white;
  }
</style>
</head>
<body>

<div class="container">
  <div class="content">要居中的内容</div>
</div>

</body>
</html>

大多数现代浏览器都支持它。然而,如果你需要考虑更旧的浏览器,特别是IE9及更早版本,Flexbox的支持可能会有限

参考文章来自:

元素居中的N种方法 - 掘金

css 水平居中(8种方法)、垂直居中(8种方法) - 掘金 (juejin.cn)

相关推荐
Hexene...8 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码44 分钟前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt1 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜053 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界3 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku3 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery