css水平垂直居中
第一种方法：
在父div里加：
display: table-cell;
vertical-align: middle;
text-align: center;
内部div设置
display: inline-block;
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
body {
margin: 0;
}
.center {
width: 250px;
height: 250px;
border: 2px solid red;
font-size: 18px;
/* 方法1 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center_inner {
width: 100px;
height: 100px;
background-color: pink;
/* 方法1 */
display: inline-block;
}
</style>
</head>
<body>
<div class="center">
<div class="center_inner">面朝大海，春暖花开！</div>
<!-- <div class="center_inner center_last">海阔天空</div> -->
</div>
</body>
</html>
使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。
中间的粉色是居中的div
第二种方法：
在居中的div元素里加
/* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
.center {
width: 100px;
height: 100px;
background-color: pink;
/* 第二种方法 */
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="center">海阔天空</div>
</body>
</html>
translate()函数可以在不知道宽高的情况下，利用它实现水平垂直居中。
translate(-50%, -50%)作用是，往上（X轴），左（Y轴）移动自身长度的50%，以使其居于中心位置。
如果使用top:50%, left:50%,是以左上角为原点，故不处于中心位置；但如果知道宽高,可以
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
第三种方法：用弹性布局实现垂直左右居中
display:flex; 设置.wrap为弹性布局 justify-content:center;定义项目在主轴(水平方向)上居中对齐 align-items:center;定义项目在交叉轴(垂直方向)上居中对齐
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css水平垂直居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.center {
width: 200px;
height: 200px;
border: 2px solid red;
margin:40px;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="center">
<div class="inner">朝气蓬勃</div>
</div>
</body>
</html>
效果图：
如有疑问请加群，讨论854184700
原文地址：https://www.cnblogs.com/yaosusu/p/11703270.html
时间： 2024-11-02 02:32:00