【CSS】实现元素水平垂直居中布局（七种方法）
文章目录
-
- 一、绝对定位（absolute）
-
- 1.1、margin 外边距
- 1.2、transform 转换
- 二、转换类型（display）
-
- 2.1、flex 弹性布局
- 2.2、grid 网格布局
- 2.3、table 表格布局
- 2.4、inline 内联元素
- 2.5、inline-block 内联块元素
一、绝对定位（absolute）
1.1、margin 外边距
- 核心代码：
/* 父元素 */
position: relative;
/* 子元素 */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 自适应外边距 */
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
}
.centerbox {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">div>
div>
body>
html>
- 结果：
1.2、transform 转换
- 核心代码：
/* 父元素 */
position: relative;
/* 子元素 */
position: absolute; /*设置绝对定位*/
/*相对第一个不是static定位的父盒子进行定位*/
/*static是postion的默认属性*/
left: 50%;
top: 50%;
/*距离第一个不是static定位的父元素上边框与左边框50%*/
transform: translate(-50%, -50%);
/*向左移动50%本元素宽度*/
/*向上移动50%本元素高度*/
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
}
.centerbox {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">div>
div>
body>
html>
- 结果：
二、转换类型（display）
2.1、flex 弹性布局
- 核心代码
/* 父元素 */
display: flex; /* 父元素flex布局 */
justify-content: center; /* 子元素水平居中 */
align-items: center;/* 子元素垂直居中 */
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.centerbox {
height: 100px;
width: 100px;
background-color: blue;
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">div>
div>
body>
html>
- 结果：
2.2、grid 网格布局
- 核心代码：
/* 父元素 */
display: grid;
/* 子元素 */
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
display: grid;
}
.centerbox {
background-color: aqua;
width: 100px;
height: 100px;
justify-self: center;
align-self: center;
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">div>
div>
body>
html>
- 结果：
2.3、table 表格布局
- 核心代码：
/* 父元素 */
display: table-cell;
vertical-align: middle;/* 垂直居中 */
text-align: center;/* 水平居中 */
/* 子元素 */
display: inline-block;
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
.centerbox {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">div>
div>
body>
html>
- 结果：
2.4、inline 内联元素
行内式元素水平垂直居中
- 核心代码：
/* 子元素 */
text-align:center;
line-height:200px; /* line-height值为父元素高度 */
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documenttitle>
<style>
.bigbox {
height: 200px;
width: 200px;
border: 1px solid black;
}
.centerbox {
background-color: aqua;
text-align: center;
line-height: 200px;
}
style>
head>
<body>
<div class="bigbox">
<div class="centerbox">居中文本div>
div>
body>
html>
- 结果：
2.5、inline-block 内联块元素
- 实现方法：
1. 必须给容器（父元素）加上text-align：center；
2. 必须给当前元素转成行内块元素display：inline-block；再给当前元素加上vertical-align：middle；
3. 在当前元素的后面（没有回车）加上同级元素span；并且对span进行vertical-align：middle；width：0；height：100%；display：inline-block；
- 示例：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
div {
width: 200px;
height: 200px;
border: aqua 1px solid;
text-align: center;
}
p {
width: 100px;
height: 100px;
border: aqua 1px solid;
display: inline-block;
vertical-align: middle;
}
span {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
style>
head>
<body>
<div>
<p>p><span>span>
div>
body>
html>
- 结果：
