CSS 居中汇总

最新推荐文章于 2021-08-20 00:34:24 发布

zb0002011

最新推荐文章于 2021-08-20 00:34:24 发布

阅读量151

点赞数

分类专栏： # CSS

原文链接：https://blog.csdn.net/weixin_37580235/article/details/82317240

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、水平居中

1.1 text-align:center

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>
 
<div id="father">
    <span id="son">我是行内元素</span>
</div>

适合父元素是块级元素，子元素宽度不固定，子元素可以是块级元素或者行级元素

1.2 margin: 0 auto;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

适合元素是块级元素，子元素宽度固定，子元素不能为行级元素。

1.3 使用定位元素

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

1) 定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; （向左移动元素宽度的一般）

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

2)不定定宽度：设置transform: translateX(-50%);


<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

1.4 flexbox布局实现（宽度定不定都可以）

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

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
 
    #son {
        width: 100px;  //可有可无
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

1.4 父元素可以是非行级元素也可以是块级元素。

2 垂直居中

2.1单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可；父元素可以是块级元素也可以是行级元素。

// 第一种
<style>
    #father {
        width: 500px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
	    height: 300px;
		line-height:300px;
    }
</style>
 
//第二种
<style>
    #father {
        width: 500px;
        background-color: skyblue;
		height: 300px;
		line-height:300px;
    }
 
    #son {
        background-color: green;    
    }
</style>

//第三种
<style>
    #father {
        width: 500px;
        background-color: skyblue;
		height: 300px;		
    }
 
    #son {
        background-color: green;   
		line-height:300px;
    }
</style>

//第四种
<style>
    #father {
        width: 500px;
        background-color: skyblue;
		line-height:300px;		
    }
 
    #son {
        background-color: green;   
		height: 300px;
    }
</style>


<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

2.2 多行的行内元素

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

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

2.3、使用定位

块级元素
方案一：使用定位
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

1)定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);


<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

2)不定高度：利用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

2.4 使用flexbox布局实现（高度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>