水平垂直-居中
例子-absolute布局-要实现最右边请使用absolute
如果子div用position: relative实现不了效果
.template-type{
position: absolute;
top: 5px;
right: 2%;
width: 23px;
}
<div style={{ position: 'relative' }}>
<div className='template-type'>
<CustomIcon type={type} style={{ fontSize: '18px' }} />
</div>
</div>
flex垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background: yellow;
}
.box {
height: auto;
width: 200px;
background: pink
}
</style>
</head>
<body>
<div class="container">
<div class="box">
flex水平垂直居中
align-items: center;
justify-content: center;
</div>
</div>
</body>
</html>
负margin在固定宽高实现水平垂直居中
- 提前知道元素的尺寸:否则margin负值的调整无法精确
- 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，
而translate可以在不知道宽高的情况下进行居中，translate()函数中的百分比是相对于自身宽高的百分比，所以能进行居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
position: relative;
height: 100px;
background: grey
}
.box {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 80px;
margin-top: -40px;
margin-left: -50px;
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
margin负值;只能固定宽高实现垂直居中
</div>
</div>
</body>
</html>
transform代替margin-水平垂直居中
CSS3解决方案：transform代替margin transform: translate(-50%, -50%)
- translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。
当使用：top: 50%;left: 50%;是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
- 旋转rotate
- 移动translate
- 缩放scale
- 扭曲skew
- 矩阵matrix,改变元素基点transform-origin
语法：
transform:none | <transform-function> [ <transform-function> ]*
也就是：transform: rotate | scale | skew | translate |matrix;
none:表示不进么变换；
transform-function:表示一个或多个变换函数，以空格分开；
换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
position: relative;
height: 100px;
background: green
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
CSS3解决方案：transform代替margin
</div>
</div>
</body>
</html>
absolute绝对定位+margin-垂直居中
margin: 0 auto仅实现水平方向居中; 想要实现垂直方向的居中可以用绝对定位。
position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。
为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。
再设置margin 垂直方向上下为auto，即可实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
position: relative;
height: 80px;
width: 400px;
background: red
}
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
width: 200px;
height: 40px;
background: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
margin:auto，absolute绝对水平垂直居中
</div>
</div>
</body>
</html>
行内元素垂直居中例子
方法1：
- 父级元素设置text-align:center;
- 自身元素设置display: inline-block;即可水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
height: 200px;
/*设置容器的高度*/
line-height: 200px;
/*设置与容器相同的行高*/
text-align: center;
/*设置文本水平居中*/
background: yellow;
}
.center {
display: inline-block;
vertical-align: middle;
background: green;
}
</style>
</head>
<body>
<div class="container">
<span class="center">这是居中的文本。</span>
</div>
</div>
</body>
</html>
方法2：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
display: flex;
align-items: center;
height: 200px;
background: yellow;
}
.center {
display: inline-block;
height: 150px;
vertical-align: middle;
background: green;
}
</style>
</head>
<body>
<div class="container">
<span class="center">这是居中的文本。</span>
</div>
</div>
</body>
</html>
方法3-参考上面translate：
<style>
.container {
position: relative;
height: 200px; /*设置容器的高度*/
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<span class="center">这是居中的文本。</span>
</div>
line-height垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.container {
background: green;
}
.box {
height: 100px;
line-height: 100px;
/* 设置和height一样高的line-height */
padding: 0 20px;
background: black;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
这行文字是垂直居中的。
</div>
</div>
</body>
</html>
inline-block转为行内块-内容水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.container {
background: green;
text-align: center;
/* 使下级元素居中 */
}
.container .box {
display: inline-block;
/* 使块级元素在同一行 */
text-align: left;
background: black;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
我是一个inline-block元素，我和我的兄弟节点在同一行水平居中。
</div>
<div class="box">
我是一个inline-block元素，我和我的兄弟节点在同一行水平居中。我有着更多的内容。
</div>
<div class="box">
我是一个inline-block元素，我和我的兄弟节点在同一行水平居中。
</div>
</div>
</body>
</html>