逛了很多文章的总结,相当于一个大汇总,将我主要参考的人放在链接里有大神颜海镜和大神张鑫旭
一、先写一下基础的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
}
.son{
/*基础代码*/
background-color: yellow;
}
.size{
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son size">子元素</div>
</div>
</body>
</html>
其中的.size是来讨论当子元素有无宽高的解决方法,效果如下:
二、先讨论不定宽高的子元素的居中问题:
方法一:absolute+负margin(这也是我在自学过程中遇到的最多的一种方式)
html代码同上面的基础代码一样,就不写了,写一下css代码:
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
position:relative;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
position: absolute;
top:50%;
left:50%;
margin-left: -50px;/*子元素宽度的一半*/
margin-top: -50px;/*子元素高度的一半*/
}
.size{
width:100px;
height: 100px;
}
</style>
注意点 :要知道子元素的宽高
方法二:absolute + margin:auto (这个我在自学过程中遇到的次数也很多)
html代码也是基础代码就不写了,写下css代码
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
position:relative;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.size{
width:100px;
height: 100px;
}
</style>
注意:要知道子元素的宽高
方法三:absolute+calc(其实我的理解这种和第一种差不多)
html代码和基础代码一样就不写了,接下来写css
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
position:relative;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
.size{
width:100px;
height: 100px;
}
</style>
注意:要知道子元素的宽高,还有就是减号左右要有空格,不然可能出不来效果
二、接下来说不需要知道子元素的宽高的解决方法
既然不需要知道子元素的宽和高,那就将html中的.size去掉
<div class="father">
<div class="son">子元素</div>
</div>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
position:relative;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
因为都是解决的水平垂直居中问题,所以效果图都是一样的,下面就不截图展示了,如果不放心,大家可以自己动手敲一下代码验证一下。
transform是css3中增加的,没看过的小伙伴可以去阅读一下css3,translate(x,y)指在x轴,y轴的2d移动。
方法二:line-height
html代码依旧是不带.size
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
line-height: 200px;
text-align: center;
font-size: 0px;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;/*默认*/
text-align: left;
}
</style>
注意:将子元素vertical-align: middle;是将一个行内元素垂直居中
方法三:利用table特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
text-align: center;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
display: inline-block;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="father">
<div class="son">子元素</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
这个table元素特有的性质:tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了,这种解决方法不得当,因为会造成代码的冗余。
方法四:利用给父元素设置display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
display: table-cell;
text-align: center;
vertical-align: middle;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素</div>
</div>
</body>
</html>
其实这个方法和上一个是一个思路,只是这个就不会造成代码的冗余
方法五:flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
display: flex;
justify-content: center;/*水平*/
align-items: center;/*垂直*/
}
.son{
/*基础代码*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素</div>
</div>
</body>
</html>
方法六:grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
/*基础代码*/
border:2px solid red;
width:200px;
height:200px;
/*不同部分*/
display: grid;
}
.son{
/*基础代码*/
background-color: yellow;
/*不同部分*/
align-self: center;
justify-self: center;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素</div>
</div>
</body>
</html>