水平居中布局
行内元素水平居中
/* 文字元素 text-align:center */
<div style="text-align: center;">居中布局</div>
单个块元素水平居中
<head>
<style>
#parent {
width: 300px;
height: 150px;
background-color: red;
}
#child {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
多个块元素水平居中
<head>
<style>
#parent2 {
width: 300px;
height: 100px;
background-color: red;
font-size: 0; /* 去掉 display: inline-block; 受换行符的影响产生的间距 */
text-align: center;
}
.child2 {
width: 50px;
height: 50px;
background-color: #000;
display: inline-block;
margin: 0 10px;
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<div id="parent2">
<div class="child2">1</div>
<div class="child2">2</div>
<div class="child2">3</div>
</div>
</body>
1
2
3
定位的方式水平居中
解决方案一：left: 50% + margin-left(-宽度/2)；
解决方案二：left: 50% + transform(translatex(-50%))；
解决方案三：left: 0 + right: 0 + margin: auto；
<head>
<style>
#parent3,#parent4,#parent5 {
width: 300px;
height: 150px;
background: red;
position: relative;
margin-bottom: 5px;
}
#child3 {
width: 100px;
height: 100px;
background: green;
position: absolute;
/* 第一种：left:50% + margin-left:-宽度/2 */
left: 50%;
margin-left: -50px;
}
#child4 {
width: 100px;
height: 100px;
background: green;
position: absolute;
/* 第二种：left:50%; transform: translateX(-50%); */
left: 50%;
transform: translateX(-50%);
}
#child5 {
width: 100px;
height: 100px;
background: green;
position: absolute;
/* 第三种：left:0; right:0; margin:auto; */
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="parent3">
<div id="child3"></div>
</div>
<div id="parent4">
<div id="child4"></div>
</div>
<div id="parent5">
<div id="child5"></div>
</div>
</body>
flex 实现水平居中
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent6 {
width: 300px;
height: 150px;
background: red;
display: flex;
justify-content: center;
}
#child6 {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="parent6">
<div id="child6"></div>
</div>
</body>
垂直居中布局
文字垂直居中：line-height = height
单个块元素垂直居中：
解决方案一：top: 50% + margin-top: -高度/2；
解决方案二：top: 50% + transform: translateY(-50%)；
解决方案三：top: 0 + bottom: 0 + margin: auto；
多个块元素：flex，align-items: center；
水平垂直居中布局
第一种方式
margin 实现水平方向居中，table-cell + vertical-align 实现垂直方向居中；
<head>
<style>
#parent11 {
width: 300px;
height: 150px;
background-color: greenyellow;
display: table-cell; /* display: table-cell，相当于 td 元素 */
vertical-align: middle; /* vertical-align 控制垂直居中 */
}
#child11 {
width: 100px;
height: 100px;
background-color: green;
margin: auto; /* margin 控制水平居中 */
}
</style>
</head>
<body>
<div id="parent11">
<div id="child11"></div>
</div>
</body>
第二种方式
absolute + transform/margin实现水平方向和垂直方向居中；
- 解决方案一：left: 0; right: 0; top: 0; bottom: 0; margin: auto;
- 解决方案二：left: 50%; top: 50%; margin: -100px 0 0 -100px;
- 解决方案三：left: 50%; top: 50%; transform: translate(-50%,-50%);
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent12, #parent13, #parent14 {
width: 300px;
height: 150px;
background-color: greenyellow;
position: relative;
margin-bottom: 5px;
}
#child12 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/* 解决方案一：left: 0; right: 0; top: 0; bottom: 0; margin: auto; */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#child13 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/* 解决方案二：left: 50%; top: 50%; margin: -50px 0 0 -50px; */
left:50%;
top:50%;
margin:-50px 0 0 -50px;
}
#child14 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/* 解决方案三：left: 50%; top: 50%; transform: translate(-50%,-50%); */
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="parent12">
<div id="child12"></div>
</div>
<div id="parent13">
<div id="child13"></div>
</div>
<div id="parent14">
<div id="child14"></div>
</div>
</body>
第三种方式
flex + justify-content + align-items实现水平方向和垂直方向居中；
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent15 {
width: 300px;
height: 150px;
background-color: greenyellow;
display: flex;
justify-content: center; /* 控制水平居中 */
align-items: center; /* 控制垂直居中 */
}
#child15 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent15">
<div id="child15"></div>
</div>
</body>
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级📦 主流布局方式
上一篇
评论
