CSS如何让一个盒子或内容在指定区域中上下左右居中
要使用CSS让盒子或内容在其父元素中上下左右居中，可以使用多种方法。例如：flexbox布局、使用grid布局、box布局、使用position定位和transform结合、以及表格属性等等，相关属性来实现内容的上下左右的居中。
接下来我们使用以上的方法，将下图中的发电率和发电量内容进行上下左右居中。
一、创建页面
首先创建一个demo目录，新建html页面和存放图标的image目录。
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 type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
font-size: 14px;
padding: 20px;
}
.item-list-box {
display: inline-block;
width: 500px;
border: 2px solid rgba(0, 0, 0, .5);
background-color:
rgba(0, 0, 255, .6);
}
.item-list-box .title,
.item-list-box .content {
width: 100%;
box-sizing: border-box;
padding: 12px 15px;
}
.item-list-box .title {
border-bottom: 1px solid rgba(0, 0, 0, .5);
}
.item-list-box .title h3 {
font-size: 18px;
color: #fff;
position: relative;
line-height: 1;
padding-left: 15px;
}
.item-list-box .title h3::before {
display: block;
content: '';
width: 4px;
height: 100%;
background-color: #fff;
position: absolute;
left: 0;
}
.item-list-box .content {
height: 200px;
position: relative;
}
.item-list-box .content ul.list li {
list-style: none;
font-size: 16px;
color: #fff;
display: inline-block;
vertical-align: middle;
padding: 5px 10px;
text-align: center;
}
.item-list-box .content ul.list li img {
width: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
</body>
</html>效果如下图：
二、实现水平和垂直方向居中
以下方法都可以实现盒子在父元素中上下左右居中的效果，选择哪种方法取决于您的布局需求和个人偏好。
2.1 使用flex布局
Flex布局（Flexible Box Layout），也称为弹性盒布局，是一种CSS布局方式，旨在提供一种更有效的方式来对容器中的子元素进行排列、对齐和分配空间，尤其适用于响应式设计，能够自动适应不同尺寸的屏幕。
Flex布局本次主要使用的属性：
- flex-direction：决定主轴的方向，可以是行（水平）或列（垂直）。
- justify-content：定义项目在主轴（水平）上的对齐方式。
- align-items：定义项目在交叉轴（垂直）上的对齐方式。
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome | |
|---|---|---|---|---|---|---|---|---|
| 支持版本 | 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit- |
| 29.0+ | 9.0+ | 9.0+ | 28.0+ |
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content ul.list{
height: 100%;
display: flex;
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
}
</style>
</body>
</html>效果如下图：
2.2 position与transform
在CSS中，可以利用position和transform结合使用，使内容在水平和垂直方向居中显示。
position支持浏览器版本：IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+
transform支持浏览器版本：IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+
先使用position定准，将内容往右和往下各移50%距离，再使用transform将内容部分盒子往左和往上移50%，则内容就可以显示在content位置了。
CSS transform中的translate功能主要用于元素的位移操作。translate可以通过不同的参数来实现元素在X轴、Y轴或Z轴上的平移。
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content ul.list{
display: inline-block;
position: relative;
left: 50%; /* 水平方向向右移50%距离（content盒子宽度的50%距离） */
top: 50%; /* 垂直方向向右移50%距离 （content盒子调度的50%距离）*/
transform: translate(-50%, -50%); /* 以内容宽和高的50%, 往左和往上移动50%距离 */
}
</style>
</body>
</html>页面效果如下图：
2.3 table-cell布局
CSS中的table-cell属性用于将一个元素设置为表格单元格布局，类似于HTML中的<td>或<th>元素。通过设置元素的display属性为table-cell，可以实现类似表格单元格的布局效果。
本次主要使用的属性：
- vertical-align：垂直方向内容居中
- text-align：水平方向内容的居中
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content{
display: table;
}
.item-list-box .content ul.list{
display: table-cell;
text-align: center; /* 水平方向内容居中 */
vertical-align: middle; /* 垂直方向内容居中 */
}
</style>
</body>
</html>页面效果如下图：
注意：必须先将属性为table-cell的父元素设置为display: table，table-cell中vertical-align和text-align方可生效。
兼容性和浏览器支持
CSS的table-cell属性在所有现代浏览器中都得到了良好的支持，包括Chrome、Firefox、Safari和Edge等。它不会影响页面的语义化，但在某些情况下可能会影响SEO。使用table-cell布局的代码相对简洁，且不需要等待所有内容加载完毕即可显示，提高了页面的响应速度
2.4 Grid布局
CSS Grid布局是一种强大的二维布局系统，允许开发者通过定义行和列来创建网格结构，并控制网格项在网格中的位置和大小。与Flex布局相比，Grid布局更适合复杂的网格结构，因为它可以同时控制行和列的布局。
将一个元素设置为display: grid，该元素就变成了网格容器，定义了一个包含子元素的网格布局上下文。
容器属性
- display：指定一个容器采用网格布局，例如display: grid;或display: inline-grid;。
- grid-template-columns和grid-template-rows：分别定义网格的列宽和行高。可以使用百分比或fr关键字来定义宽度和高度，或者使用repeat()函数来简化重复的定义。
- grid-gap：设置网格项之间的间距。
- grid-template-areas：定义命名区域，方便通过名称放置网格项。
项目属性
- grid-column-start、grid-column-end、grid-row-start、grid-row-end：控制网格项的起始和结束位置。
- grid-area：通过名称指定网格项的位置。
- justify-self、align-self：控制网格项的水平和对齐方式。
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content{
display: grid;
}
.item-list-box .content ul.list{
justify-self: center; /* 左右居中 */
align-self: center; /* 上下居中 */
}
</style>
</body>
</html>页面效果如下：
2.5 Grid布局中的place-items
place-items是同时设置 align-items 和 justify-items的快速方法。将其设置为center等同于align-items: center和justify-items: center组合。
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content{
display: grid;
/* 等同于同时设置了 align-items: center和justify-items: center */
place-items: center;
}
</style>
</body>
</html>页面效果如下图：
2.6 旧的Box布局
将对象作为弹性伸缩盒显示，它是弹性伸缩盒的一部分，也称为伸缩盒最老版本。虽然现在推荐使用display: flex，但了解display:box仍然有助于理解弹性盒子布局的演进和兼容性处理。
代码如下：
<!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 type="text/css">
/* 略... */
</style>
</head>
<body>
<div class="item-list-box">
<div class="title">
<h3>电量统计</h3>
</div>
<div class="content">
<ul class="list">
<li>
<img src="image/icon_white_01.png" alt="">
<p>发电率：95%</p>
</li>
<li>
<img src="image/icon_white_02.png" alt="">
<p>发电量：25329338</p>
</li>
</ul>
</div>
</div>
<style type="text/css">
.item-list-box .content{
display: -webkit-box;
-webkit-box-align: center; /* 上下居中 */
-webkit-box-pack: center; /* 左右居中 */
}
</style>
</body>
</html>页面效果如下图：
此篇就先讲到这，希望对大家有所帮助。