CSS元素居中总结

本文主要介绍了CSS元素水平和垂直居中的方法。水平居中方面,涵盖了inline和inline-*元素、块级元素以及多个块级元素在同一行的居中方式;垂直居中方面,介绍了单行和多行内联元素的居中方法,包括使用内边距、line-height、vertical-align和flexbox等。
#水平方向居中
1、inline 和 inline-* 元素的水平方向居中
将一个块级元素中的 inline 或者类 inline 元素居中,在需要居中的元素的父元素上面加:
、、、text-align:center;、、、
注意: 这个方法对 inline, inline-block, inline-table, inline-flex 元素都有效。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
header, nav {
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
我要居中!!!
</header>
<nav role='navigation'>
<a href="#0">One</a>
<a href="#0">Two</a>
<a href="#0">Three</a>
<a href="#0">Four</a>
</nav>
</body>
</html>

2、块级元素的水平方向居中
首先这个块级元素必须宽度固定,然后左外边距和右外边距设为auto
width: 100px;
margin: 0 auto;
例子:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
main{
text-align: center;
border: 1px solid green;
}
main div {
display: inline-block;
border: 1px solid red;
}
</style>
<body>
<main>
<div>
123
</div>
<div>
456
</div>
<div>
789
</div>
</main>
</body>
</html>




3、如果想让多个块级元素在同一行中水平居中时,
①父元素上面加:
、、、text-align:center;、、、
②块级元素修改display: inline-block;

例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
text-align: center;
border: 1px solid black;
}
div{
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我要</div><div>居中</div>
<div>!!!</div>
</body>
</html>

#垂直方向居中
一、inline 和 inline-* 元素的垂直方向居中
1、单行的内联元素垂直居中
①最简单的一种,上内边距和下内边距相等:
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
main {background: white;
margin: 20px 0;
padding: 50px;
}
main a {background: black;
color: white;
padding: 40px 30px;
text-decoration: none;

</style>
<title>JS Bin</title>
</head>
<body>
<main>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>
</body>
</html>

②因为某些原因不能使用这种简单粗暴的方法(这种方法也有其局限性),或者你想垂直居中没有元素包裹的文本的时候,利用 line-height 属性。将容器的 line-height 的值设置为与容器高度相同的值,就能很轻松的居中文本。

例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
main {background: white;
margin: 20px 0;
padding: 40px;
}
main div {background: black;
color: white;
height: 100px;
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
</style>
<title>JS Bin</title>
</head>
<body>
<main>
<div>
I'm a centered line.
</div>
</main>
</body>
</html>

2、多行的内联元素垂直居中

①上下内边距相等的方法同样可以用在多行的处理上,但是就像前面所说的,这种方法有局限性。当元素是一个表格单元或者通过 CSS 的设置表现成一个单元格时,这种方法就不奏效了。在这种情况下,使用 vertical-align 属性来解决这个问题


例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {background: #f06d06;
font-size: 80%;
}
table {background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* 单元格自带 vertical-align: middle; */
}
.center-table {display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {display: table-cell; // 将 p 表现成一个单元格
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle; // 添加单元格默认的属性
}
</style>
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
I'm vertically centered multiple lines of text in a real table cell.
</td>
</tr>
</table>
<div class="center-table">
<p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</body>
</html>

②如果不能使用“表格大法”,可以试试 flexbox。一个 flex-child 在 flex-parent 中垂直居中松松的。

例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {background: #f06d06;
font-size: 80%;
}
div {background: white;
width: 240px;
margin: 20px;
}
.flex-center {background: black;
color: white;
border: 10px solid white;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
}
.flex-center p {margin: 0;
padding: 20px;
}
</style>
<title>JS Bin</title>
</head>
<body>
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
</body>
</html>

转载于:https://juejin.im/post/5d0a5c1c5188254a6c23f087

<think>我们被要求总结CSS中实现元素垂直和水平居中的各种方法。根据提供的引用,我们可以汇总多种方法,并补充一些常见方法。以下将分类介绍: ### 一、行内元素(包括行内块元素居中 1. **水平居中**:在父元素上设置 `text-align: center;`。 2. **垂直居中**:在父元素上设置 `line-height` 等于父元素的 `height`(适用于单行文本或行内元素)。 ### 二、块级元素居中 1. **水平居中**:设置块级元素左右外边距为 `auto`,即 `margin: 0 auto;`,同时需要指定宽度(否则会占满整行无法居中)。 2. **垂直居中**:对于块级元素的垂直居中,通常需要结合其他技术(如定位、flex等)。 ### 三、使用绝对定位实现居中(适用于已知或未知尺寸的元素) 1. **已知尺寸**: - 设置父元素为非`static`定位(如`relative`、`absolute`、`fixed`),子元素为`absolute`定位。 - 设置子元素的`top: 50%; left: 50%;`,然后通过负边距(`margin-top`和`margin-left`)分别减去自身高度和宽度的一半。 ```css #parent { position: relative; } #child { position: absolute; top: 50%; left: 50%; margin-top: -25px; /* 高度的一半 */ margin-left: -25px; /* 宽度的一半 */ } ``` 2. **未知尺寸(推荐)**: - 使用`transform`属性,不需要知道元素的具体尺寸。 ```css #child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` ### 四、使用Flexbox布局(现代布局,推荐) 1. **父元素设置**: ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` ### 五、使用Grid布局(现代布局) 1. **父元素设置**: ```css .parent { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ } ``` ### 六、表格布局(传统方法,不常用) ```css .parent { display: table-cell; text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ } .child { display: inline-block; /* 或者inline */ } ``` ### 七、行内块元素与文本基线对齐问题 对于行内块元素(如`<input>`, `<img>`, `<button>`等),当与文本在同一行时,默认与基线对齐。可以通过设置`vertical-align: middle;`来调整垂直方向的对齐。 ### 总结 以上方法涵盖了多种场景,具体选择取决于: - 需要居中元素类型(行内、块级) - 布局的兼容性要求(如是否需要支持旧版浏览器) - 是否知道元素的尺寸 对于现代浏览器,推荐使用Flexbox或Grid布局,因为它们简洁且功能强大。对于需要兼容旧浏览器的项目,则可以使用绝对定位结合`transform`的方法。 §§相关问题§§ 1. 在哪些情况下使用Flexbox布局比使用绝对定位更合适? 2. 如何解决使用绝对定位居中时可能出现的模糊问题? 3. CSS Grid布局中除了`place-items`还有哪些属性可以用于居中? 4. 如何实现一个元素在父元素内水平和垂直居中,同时保持宽高比?</think>### CSS实现元素垂直水平居中方法汇总 #### 一、行内/行内块元素居中 1. **水平居中** ```css .parent { text-align: center; } ``` 2. **垂直居中** ```css .parent { height: 100px; /* 固定高度 */ line-height: 100px; /* 行高等于高度 */ } ``` #### 二、块级元素居中(已知尺寸) ```css .child { width: 200px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 高度一半的负值 */ margin-left: -100px; /* 宽度一半的负值 */ } ``` #### 三、通用定位法(未知尺寸) 1. **transform 方案** ```css .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` > 通过移动自身50%尺寸实现居中[^4] 2. **四向定位方案** ```css .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } ``` #### 四、Flexbox 布局(现代推荐) ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` > 优点:代码简洁、响应式友好 #### 五、Grid 布局(现代方案) ```css .parent { display: grid; place-items: center; /* 单行代码实现双向居中 */ } ``` #### 六、表格布局(传统方案) ```css .parent { display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ } .child { display: inline-block; /* 需转为行内块 */ } ``` #### 七、特殊场景处理 1. **行内块元素基线对齐** ```css .child { vertical-align: middle; } ``` 2. **多行文本居中** ```css .parent { display: flex; flex-direction: column; justify-content: center; } ``` ### 选择建议 - ✅ **现代浏览器**:优先使用 Flexbox/Grid - 🛠️ **未知尺寸元素**:transform + 绝对定位 - ⚠️ **老旧项目**:表格布局或负边距方案 - 📱 **响应式需求**:Flexbox 最灵活 > 注意:绝对定位方案要求父元素设置 `position: relative` 或其它非 static 定位[^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值