div居中方法(共8种)

div居中方法(共8种)水平居中行级元素:为该行级元素的父元素设置text-align:center配合line-height样式<divstyle=”width:500px;height:100px;line-height:100px;border:1pxsolidgreen;text-align:center;”><span>行级元素</span>…

大家好,欢迎来到IT知识分享网。div居中方法(共8种)"

水平居中

行级元素:为该行级元素的父元素设置text-align:center配合line-height样式

<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
    <span>行级元素</span>
</div>

块级元素:为其自身设置margin:auto样式

<div style="width: 500px;height: 100px;border: 1px solid red;">
    <div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 1px solid gold">
        块级元素
    </div>
</div>

垂直居中

方法一:

display:table;此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
    <div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>

方法二:

 利用flex布局使内部块级元素水平,垂直居中(display:flex;justify-content: center; align-items:center;)

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px ">
    <div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

方法三:

利用定位实现,父元素:position:relative; ,子元素:position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
        块级元素
    </div>
</div>

方法四:

绝对定位, left:50%,top: 50% + margin-left:-(自身宽度的一半),margin-top:-(自身高度的一半)
缺点:要自己计算容器的宽高,万一容器的宽高改变还要修改css样式

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
    <div style="position:absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px;
    width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
        块级元素
    </div>
</div>

方法五:

绝对定位,left: 0,right: 0, top: 0, bottom: 0 + margin:auto

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
    <div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
    width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
        块级元素
    </div>
</div>

方法六:

固定定位position:fixed;并设置一个较大的z-index层叠属性值。

<div style="position:fixed;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;z-index: 999;
    width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
    块级元素
</div>

方法七:

要把元素相对于视口进行居中,那么相当于父元素的高度就是视口的高度,视口的高度可以用vh来获取:

<div style="margin: 50vh auto 0;transform: translateY(-50%);line-height:100px
    width: 100px;height: 100px;border: 1px solid gold;text-align:center;">
    块级元素
</div>

方法八:

Flex加margin:auto

<div style="display: flex;width: 500px;height: 200px;border: 1px solid red;">
    <div style="margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">
        块级元素
    </div>
</div>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/12183.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信