div标签:水平居中和垂直居中的实现(附代码)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居中,一个是垂直居中,总结一下用到的方法。

水平居中实现

1

margin:0 auto

auto表示外边距左右距离相同即可实现水平居中的效果

垂直居中实现

1、最常用到的一种方式是根据偏移量来实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<style>

    *{margin: 0;padding: 0;}

    .content{

        position: relative;

        width: 300px;

        height: 300px;

        background-color: #000;

        margin: 300px auto;

    }

    .beat{

        width: 100px;

        height: 100px;

        background-color: #ff0000;

        position: absolute;

        left:50%;

        top:50%;

        margin-top: -50px;

        margin-left: -50px;

    }

</style>

 

<div class="content">

    <div class="beat">

    </div>

</div>

4172825918-5b67b87482a94_articlex.jpg

红色方块位于黑色方块的中心位置,实现了垂直居中效果

left,top分别设置50%,红色方块的起始点位于垂直居中的位置,效果如下图:

2311003374-5b67bad013fca_articlex.jpg

想要实现方块内部中心点垂直居中,还要加上偏移量,margin-top的值为红色框heigh/2,margin-left的值为红色框width/2。

2、让p块里的多行文字垂直居中,可以用table和table-cell来实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<style>

    *{margin: 0;padding: 0;}

    .content{

        width: 300px;

        height: 300px;

        background-color: #000;

        margin: 300px auto;

        color: #fff;

        display: table;

        text-align: center;

    }

    .content p{

        display: table-cell;

        height: 100px;

        vertical-align: middle;

    }

</style>

 

<div class="content">

   <p>垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分

       常见的效果之一垂直居中是布局中十分常见的效果之一</p>

</div>

2046267695-5b67becda28f3_articlex.jpg

display: table使块状元素成为一个块级表格,display: table-cell;子元素设置成表格单元格,vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果

相关文章推荐:

innerHTML属性是什么?innerHTML属性的用法

什么是响应式布局?html响应式布局的实现

以上就是div标签:水平居中和垂直居中的实现(附代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

清除浮动的css写法有哪些

关于Html中<label>标签的for属性的详细分析

怎么用Html设置一个定时器

手把手教你使用img标签添加图片效果(知识)

利用Html+css+js实现简单的点赞效果

怎么在Html中插入视频和音频

Html添加遮罩效果

Html怎样把div放在底部

Html怎么设置table宽度

怎么向Html添加音频

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




打赏

取消

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

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

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

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

评论

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