CSS水平垂直居中

参考：https://blog.csdn.net/weixin_37580235/article/details/82317240

一、水平居中

1.1 行内元素

对于行内元素，可以将父级元素设置为块级元素，并给父元素设置 text-align: center;

<div id="father">
  <span id="son">我是行内元素，我要水平居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  text-align:center;
}
</style>

效果：
span水平居中.png
1.2 块级元素
1.2.1 宽度固定(方案一)

需要给谁居中，就给谁设定margin:0 auto; 不需要设置position也可实现。

<div id="father">
  <div id="son">我是块级元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
}
#son{
  background:skyblue;
  width:300px;
  height:200px;
  margin:0 auto;  
  text-align:center;
}
</style>

效果图：
固定宽度div水平居中.png
1.2.2 宽度固定(方案二)

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

<div id="father">
 <div id="son">我是块级元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
 height:100%;
 background:pink;
 position:relative;
}
#son{
 background:skyblue;
 width:300px;
 height:200px;
 position:absolute;
 left: 50%;
 margin-left: -150px;
 /*或者transform: translateX(-50%);*/
 text-align:center;
}
</style>

效果图：
固定宽度div水平居中.png
1.2.3宽度不定(方案一)

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
利用css3新增属性transform: translateX(-50%);

<div id="father">
  <div id="son">我是块级元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  text-align:center;
  position:relative;
}
#son{
  background:skyblue;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  text-align:center;
}
</style>

效果图：
宽度不定div水平居中.png
1.2.4 宽度不定(方案二)

默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，再给父元素设置 text-align: center;

<div id="father">
  <div id="son">我是块级元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}

#father{
  height:100%;
  background:pink;
  text-align:center;
}
#son{
  background:skyblue;
  margin:0 auto;  
  text-align:center;
  display:inline;
}

效果图：
不定宽度div水平居中.png
1.2.5宽度随意

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<div id="father">
  <div id="son">我是块级元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  display: flex;
  justify-content: center;
}
#son{
  background:skyblue;
  text-align:center;
}
</style>

效果图：
flexbox布局水平居中.png

二、垂直居中

2.1 行内元素
2.1.1单行

只需要设置单行行内元素的"行高等于盒子的高"即可；

<div id="father">
  <span id="son">我是单行行内元素，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:200px;
  background-color:pink;
  line-height:200px;
}
#son{
  background-color:skyblue;
}
</style>

效果图：


单行行内元素垂直.png
2.1.2 多行

使用给父元素设置display:table;子元素设置：display:table-cell和vertical-align: middle;属即可；

<div id="father">
  <span id="son">我是多行行内元素，我要垂直居中<br>我是多行行内元素，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background-color:pink;
  display:table;
}
#son{
  background-color:skyblue;
  vertical-align:middle;
  display: table-cell;
}
</style>

效果图：
多行行内元素垂直居中.png

可以发现父元素的背景会一直被子元素遮住。所以在这里仍存疑。

2.2 块状元素
2.2.1固定高度(使用定位)

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中。
设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<div id="father">
  <div id="son">我是块级元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position: relative;
}
 
#son {
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    margin-top: -50px;
       //transform: translateY(-50%)
}
</style>

效果图：
固定高度div垂直居中.png
2.2.2不定高度(使用定位)

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中。
设置绝对子元素transform: translateY(-50%);

<div id="father">
  <div id="son">我是块级元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position: relative;
}
#son {
    background-color: skyblue;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
</style>

效果图：
不定高度div垂直居中.png
2.2.3 高度随意(使用flexbox布局)

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<div id="father">
  <div id="son">我是块级元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    display: flex; 
    align-items: center;
}
 
#son {
    background-color: skyblue;
}
</style>

效果图：
flex布局垂直居中.png

三、水平垂直居中

3.1 块级元素
3.1.1 宽高固定(方案一)

设置父元素为相对定位，给子元素设置绝对定位，再设置top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<div id="father">
  <div id="son">我是块级元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    width:300px;
    height:300px;
    background-color: skyblue;
    position:absolute;
    top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}
</style>

效果图：
宽高固定水平垂直居中.png
3.1.3 宽高固定(方案二)

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<div id="father">
  <div id="son">我是块级元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    width:300px;
    height:300px;
    background-color: skyblue;
    position:absolute;
    left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}
</style>

效果图：
宽高固定水平垂直居中.png
3.1.2 宽高不定

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<div id="father">
  <div id="son">我是块级元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    background-color: skyblue;
    position:absolute;
    left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
}
</style>

效果图：
宽高不定div水平垂直居中.png
3.1.4宽高随意(使用flex布局)

设置父元素为flex定位，justify-content: center; align-items: center;

<div id="father">
  <div id="son">我是块级元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#son {
    background-color: skyblue;
}
</style>

效果图：
flex布局div水平垂直居中.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容