css常见居中方式-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
文章目录
前言
页面布局基本都会有居中样式包括水平居中、垂直居中等
一、水平居中
1、使用text-align + inline-block水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用 text-align + inline-block 水平居中</title>
<style>
.wrap{
height: 200px;
text-align: center;
border: 1px solid red;
}
.wrap .text{
height: 100px;
width: 300px;
display: inline-block;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
</body>
</html>
2、使用定位postion + 变形transform水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用定位postion + 变形transform水平居中</title>
<style>
.wrap {
height: 200px;
border: 1px solid red;
position: relative;
}
.wrap .text {
height: 100px;
width: 300px;
border: 1px solid blue;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
</body>
</html>
3、使用 margin: 0 auto + display: block 水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用 margin: 0 auto + display: block 水平居中</title>
<style>
.wrap {
height: 200px;
border: 1px solid red;
}
.wrap .text {
height: 100px;
width: 300px;
display: block;
border: 1px solid blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<span class="text">我是元素1</span>
</div>
</body>
</html>
4、使用css3新特性flex弹性盒子布局水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex弹性盒子布局水平居中</title>
<style>
.wrap {
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center;
}
.wrap .text {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<span class="text">我是元素1</span>
</div>
</body>
</html>
二、垂直居中
1、固定高度height = 行高line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定高度height = 行高line-height</title>
<style>
.wrap {
height: 300px;
line-height: 300px;
}
.wrap .text {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
</body>
</html>
2、使用定位postion + 变形transform垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用定位postion + 变形transform垂直居中</title>
<style>
.wrap {
height: 600px;
width: 300px;
border: 1px solid red;
position: relative;
}
.wrap .text {
width: 300px;
height: 100px;
border: 1px solid blue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#div1 {
width: 300px;
height: 200px;
background-color: #ccc;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background-color: #FB7299;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
<div id="div1">
<div id="div2">
子容器的垂直居中
</div>
</div>
</body>
</html>
3、使用display: table-cell + vertical-align 垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display: table-cell + vertical-align 垂直居中</title>
<style>
.wrap {
height: 600px;
width: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.wrap .text {
width: 300px;
height: 100px;
border: 1px solid blue;
}
#div1 {
width: 300px;
height: 200px;
margin: 100px auto;
border: 1px solid red;
display: table;
}
#div2 {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
<div id="div1">
<div id="div2">
多行文本的垂直居中
多行文本的垂直居中
多行文本的垂直居中
多行文本的垂直居中
多行文本的垂直居中
</div>
</div>
</body>
</html>
4、使用css3新特性flex弹性盒子布局垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex弹性盒子布局垂直居中</title>
<style>
.wrap {
height: 600px;
width: 300px;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrap .text {
width: 300px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="text">我是元素1</div>
</div>
</body>
</html>
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
