css里上下居中怎么弄?


本文摘自PHP中文网,作者little bottle,侵删。

css上下居中的实现方法:1、将单行的行内元素设置行高等于盒子高;2、将多行的行内元素使用给父元素设置“display:table-cell;和vertical-align: middle;”即可。

css里上下居中也就是垂直居中,css中按元素可以分为三种垂直居中方式,分别是单行的行内元素,多行的行内元素以及块元素的垂直居中,下面将做详细介绍。

单行的行内元素

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<style>

    #father {

        width: 500px;

        height: 300px;

        background-color: skyblue;

    }

  

    #son {

        background-color: green;

        height: 300px;

    }

</style>

  

<div id="father">

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

</div>

效果:

1556519521438598.jpg

多行的行内元素

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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>

效果:

1556519558892168.jpg

块级元素

方案一:使用定位

首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

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

阅读剩余部分

相关阅读 >>

css selectors是什么

css中id选择器的命名规则有哪些

css如何让字竖着写

css如何不显示元素

css如何使用!important规则?(代码示例)

如何利用纯css实现图片轮播

css 页面显示不全怎么办

css vertical-align属性怎么用

在html中怎么设置文字间距

分享一些提高前端开发效率的css 属性选择器!!

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...