目录
1.display: flex;align-items: center;
2.使用position + top +margin-top
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Documenttitle>
- <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>
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Documenttitle>
- <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>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Documenttitle>
- <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>
不是所有的浏览器都可以兼容
- 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博客
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <style>
- .parent {
- text-align: center;
- }
- style>
- head>
- <body>
- <div class='parent'>
- <span>123span>
- div>
- body>
- html>
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Titletitle>
- <style>
- .child {
- background: skyblue;
- width:200px;
- height:200px;
- margin: 0 auto;
- }
- style>
- head>
- <body>
- <div class='parent'>
- <div class='child'>div>
- div>
- body>
- html>
文本属性的话,如果你的行内元素是文本,你可以使用line-height
和text-align
来实现水平和垂直居中
- 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>123span>
- div>
- body>
- html>
.container
元素被设置为相对定位,以作为 .content
元素的定位参考。.content
元素被绝对定位到 .container
内,然后使用 top: 50%; left: 50%;
将其移动到容器的中心。最后,transform: translate(-50%, -50%);
用于微调元素的位置,使其完全居中。
- 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%);
是一种在垂直和水平方向上同时将元素居中的常用技巧。这是因为 transform
的 translate
函数可以通过百分比单位相对于元素自身的尺寸进行计算。
让我们来解释一下为什么要使用 -50%
的情况:
水平居中(左右方向):
left: 50%;
时,元素的左侧边界会定位在容器的中心点位置。transform: translateX(-50%);
,元素会向左移动自身宽度的一半,从而将元素的中心点与容器的中心点对齐,实现水平居中。垂直居中(上下方向):
top: 50%;
时,元素的顶部边界会定位在容器的中心点位置。transform: translateY(-50%);
,元素会向上移动自身高度的一半,从而将元素的中心点与容器的中心点对齐,实现垂直居中。综合起来,transform: translate(-50%, -50%);
是将元素在水平和垂直方向上同时移动,使其中心点与容器的中心点对齐,从而实现元素的完全居中。
- 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的支持可能会有限
参考文章来自: