一. 水平居中
1. 行内元素水平居中
父元素设置
text-align:center;
2. 块级元素水平居中
元素自身加
margin: auto;
<style>
.parent{
border: 2px solid #66FFFF ;
text-align: center;
}
p{ border: 2px solid #999; }
.son{
border: 2px solid #777;
width: 100px;
height: 50px;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<p>13131311313133</p>
<div class="son">son</div>
</div>
</body>
二. 垂直居中
1. Flex 垂直居中
只需要父元素加
display: flex;
justify-content:center ;
align-items: center;
示例：
<style>
body{
height: 100vh;
}
.parent{
border: 2px solid #66ffff;
height: 200px;
display: flex;
justify-content:center ;
align-items: center;
}
.son{
width: 200px;
height: 100px;
border: 2px solid #333;
}
p{
text-align:center;
word-break: break-all;
}
</style>
<body>
<div class="parent">
<div class="son">
<p>13131333131131222222222223333333333333</p>
</div>
</div>
</body>
文字垂直居中
预览链接
用 Flex 来做居中的话，我只要先指定容器为一个 Flex 容器，然后 justify-content 让他水平方向居中，再 align-items 让他垂直方向居中。我可以很简单很优雅的就做到居中。
2. position 垂直居中
①. 不知父元素宽高 (通用方法)
父元素(宽高未知)
position:relative;
子元素(宽高未知)
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
示例：
<style>
body{
height: 100vh;
}
.parent{
position:relative;
border:2px solid #66ffff ;
height: 30%;
}
.son{
width: 50%;
height: 50%;
border: 2px solid #333;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
p{
text-align: center;
word-break: break-all;
}
</style>
<body>
<div class="parent">
<div class="son">
<p>position 通用垂直居中</p>
</div>
</div>
</body>
①. 已知父元素宽高
利用margin代替transform来居中
css如下
<style>
.parent{
position:relative;
border:2px solid #66ffff ;
width: 300px;
height: 150px;
}
.son{
width: 200px;
height: 100px;
border: 2px solid #333;
position: absolute;
top:0;
left: 0;
margin-left:25px ;
margin-top:50px;
}
</style>
position缺点：少了变化，不利于响应式布局。目前对我来说，position用的最少。
3. Float 垂直居中
<style>
.parent{
border:2px solid #66ffff ;
width: 400px;
height: 200px;
}
.son{
width: 200px;
height: 100px;
border: 2px solid #333;
float:right;
margin-top:50px;
margin-right:100px;
}
.clearfix::after{
content:'';
display:block;
clear :both;
}
p{
text-align: center;
word-break: break-all;
}
</style>
<div class="parent clearfix">
<div class="son">
<p>float垂直居中</p>
</div>
</div>
4. margin 垂直居中
body{
height: 100vh;
}
.parent{
border:2px solid #66ffff ;
width: 400px;
height: 200px;
}
.son{
width: 200px;
height: 100px;
border: 2px solid #333;
margin: 50px auto;
}
p{
text-align: center;
word-break: break-all;
}
5. 文字的垂直居中
line-height+ padding
子元素line-height + padding-top +padding-bottom = 父元素height
.parent{
border:2px solid #66ffff ;
height: 100px;
}
p{
margin:0;
line-height:60px;
padding:20px 0;
text-align: center;
word-break: break-all;
border: 2px solid #333;
}
image.png
