CSS--水平居中--方法/实例
最编程
2024-01-12 13:54:51
...
简介
本文介绍CSS中把元素水平居中的方法。
内联元素水平居中
需求:将div(class="container")里的span(class="middle")水平居中。
想要达到的效果:
下边所有方案的结果都跟上图一样。
方案1:flex
说明
所有子元素居中:父元素设置display:flex,justify-content:center。
- justify-content:控制主轴(横轴)上所有 flex 项目的对齐。
- align-items:控制交叉轴(纵轴)上所有 flex 项目的对齐。
- align-self:控制交叉轴(纵轴)上的单个 flex 项目的对齐。
- align-content:控制“多条主轴(横轴)”的 flex 项目在交叉轴的对齐。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
display: flex;
justify-content:center;
background-color: #ffb91b;
}
.middle {
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<span class="middle">中间</span>
</div>
</body>
</html>
方案2:text-align
简介
父元素要设置:text-align: center;
子元素要设置:margin: 0 auto。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
text-align: center;
background-color: #ffb91b;
}
.middle {
margin: 0 auto;
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<span class="middle">中间</span>
</div>
</body>
</html>
方案3:绝对定位
简介
子元素设置:
- position: relative;
- top: 50%;
- left: 50%;
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
background-color: #ffb91b;
}
.middle {
position: relative;
top: 50%;
left: 50%;
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<span class="middle">中间</span>
</div>
</body>
</html>
块元素水平居中
需求:将div(class="container")里的div(class="middle")水平居中。
想要达到的效果
下边所有方案的结果都跟上图一样。
方案1:flex
说明
所有子元素居中:父元素设置display:flex,justify-content:center。
- justify-content:控制主轴(横轴)上所有 flex 项目的对齐。
- align-items:控制交叉轴(纵轴)上所有 flex 项目的对齐。
- align-self:控制交叉轴(纵轴)上的单个 flex 项目的对齐。
- align-content:控制“多条主轴(横轴)”的 flex 项目在交叉轴的对齐。
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
display:flex;
justify-content:center;
background-color: #ffb91b;
}
.middle {
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间</div>
</div>
</body>
</html>
方案2:text-align
简介
父元素:设置 text-align:center
子元素:设置 display: inline-block
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
text-align: center;
background-color: #ffb91b;
}
.middle {
display: inline-block;
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间</div>
</div>
</body>
</html>
方案3:table
简介
给子元素设置display:table; margin:0 auto
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html, body {
margin: 0; /*若不设置,默认为8px*/
}
.container {
background-color: #ffb91b;
}
.middle {
display: table;
margin: 0 auto;
background-color: #f974ff;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间</div>
</div>
</body>
</html>
上一篇: 常用的CSS技巧合集