CSS元素居中总结

最新推荐文章于 2025-06-10 20:42:44 发布

转载最新推荐文章于 2025-06-10 20:42:44 发布 · 153 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5d0a5c1c5188254a6c23f087

本文主要介绍了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>

<style>

header, nav {

text-align: center;

border: 1px solid red;

}

</style>

</head>

<body>

我要居中！！！

</header>

<a href="#0">Three</a>

</nav>

</body>

</html>

2、块级元素的水平方向居中

首先这个块级元素必须宽度固定，然后左外边距和右外边距设为auto

width: 100px;

margin: 0 auto;

例子：

<!DOCTYPE html>

<html>

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

<style>

body{

text-align: center;

border: 1px solid black;

}

div{

display: inline-block;

border: 1px solid red;

}

</style>

</head>

<body>

</body>

</html>

#垂直方向居中

一、inline 和 inline-* 元素的垂直方向居中

1、单行的内联元素垂直居中

①最简单的一种，上内边距和下内边距相等：

例子：

<!DOCTYPE html>

<html>

<head>

<style>

main {background: white;

margin: 20px 0;

padding: 50px;

}

main a {background: black;

color: white;

padding: 40px 30px;

text-decoration: none;

</style>

</head>

<body>

<main>

<a href="#0">Centered</a>

</main>

</body>

</html>

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

例子：

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<main>

<div>

I'm a centered line.

</div>

</main>

</body>

</html>

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

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

例子：

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<table>

<tr>

<td>

I'm vertically centered multiple lines of text in a real table cell.

</td>

</tr>

</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>

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

</head>

<body>

<p>I'm vertically centered multiple lines of text in a flexbox container.</p>

</div>

</body>

</html>

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