元素居中的方法总结

目录

垂直居中

行内元素垂直居中

单行文本垂直居中

[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)

相关推荐
李鸿耀15 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈35 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo2 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站