css-水平居中与垂直居中
一，水平居中
1，行内元素 先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center；如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
2，块级元素
方案一：(分宽度定不定两种情况)
定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
方案二：使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
方案三：使用flex布局
使用flex布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
二，垂直居中
1，单行的行内元素
如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！
2，多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;属即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#father {
width: 500px;
height: 200px;
background-color: skyblue;
display:table-cell;
vertical-align: middle
}
#son {
background-color: green;
display: inline;
}
</style>
</head>
<body>
<div id="father">
<p id="son">我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</p>
</div>
</body>
</html>
3，块级元素
方案一：使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；
定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);
方案二：flex布局
父元素display: flex; align-items: center
方案三：table布局
使用display：table进行垂直居中！给父元素设置display：table；子元素设置为display：table-cell;
方案四：父元素伪类方法
给父元素添加伪类 子元素使用diaplay:inline-block,vertical-align:middle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#father {
width: 500px;
height: 200px;
background-color: skyblue;
text-align:center;
}
#father::after{
content:'';
height:100%;
display:inline-block;
vertical-align: middle
}
#son {
width:150px;
height:100px;
background-color: green;
display:inline-block;
vertical-align: middle
}
</style>
</head>
<body>
<div id="father">
<div id="son">伪类居中</div>
</div>
</body>
浙公网安备 33010602011771号