C语言学习网

怎样使用CSS实现盒子水平垂直居中

发表于:2023-02-03 作者:安全数据网编辑
编辑最后更新 2023年02月03日,小编给大家分享一下怎样使用CSS实现盒子水平垂直居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!原始代码:center.

小编给大家分享一下怎样使用CSS实现盒子水平垂直居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

原始代码:

center.html

            Center        

center.css

body {    background-color: #6ed0ff;}.father {    background-color: #be33ec;    border-radius: 20px;    box-shadow: 0 0 15px rgb(0, 0, 0);    margin: 100px auto;    width: 300px;    height: 300px;}.son {    background-color: #fcff00;    border-radius: 20px;    box-shadow: 0 0 10px rgb(0, 0, 0);    width: 100px;    height: 100px;}

原始效果:

实现子盒子相对于父盒子垂直居中效果:

1. grid

.father {    display: grid;}.son {    align-self: center;    justify-self: center;}

2. absolute + 负margin

.father {    position: relative;}.son {    position: absolute;    left: 50%;    top: 50%;    margin-left: -50px;    margin-top: -50px;}

3. absolute + transform

.father {    position: relative;}.son {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

4. absolute + margin: auto

.father {    position: relative;}.son {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;}

5. flex

.father {    display: flex;    justify-content: center;    align-items: center;}

6. margin+transfrom

.father {    overflow: hidden;}.son {    margin: 50% auto;    transform: translateY(-50%);}

7. table-cell

.father {    display: table-cell;    text-align: center;    vertical-align: middle;}.son {    display: inline-block;}

8. inline-block + vertical-align

.father {    text-align: center;    line-height: 300px;}.son {    display: inline-block;    vertical-align: middle;}

以上是"怎样使用CSS实现盒子水平垂直居中"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0