实现水平垂直居中的方式?

标签:2024-05-19 17:42:53

1、通过绝对定位的方式 absolute 负margin

首先知道子元素的宽高,给子元素设置top:50%;left:50%,但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中示。借助外边距的负值,负的外边距可以让元素向相反方向定位。通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了

2、absolute transform (过渡)

使用绝对定位的方式实现水平垂直居中。容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

3、absolute margin auto

将子元素的上下左右距离都设为0,然后将margin设为auto,这种方法也需要知道子元素的宽高。

4、使用flex布局设置居中

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式

给容器设置:

display: flex;写在父元素上这就是定义了一个伸缩容器

justify-content主轴对齐方式,默认是横轴

align-items 纵轴对齐方式,默认是纵轴

5、给容器加给伪元素line-height

设置line-height等于容器的高度。给孩子设置display: inline-block;。只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

6、tabel-cell实现垂直居中

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

而且tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

使用tabel-cell实现垂直居中,容器设置 display: table-cell;;

vertical-align: middle属性设置元素的垂直对齐方式

子元素如果是块级元素,直接使用左右margin:auto实现水平居中。如果是行内元素,给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效。

原文出处:http://www.dongblog.com/notes/103.html
来源:博客网 转载请注明出处!

活跃用户

无辄
Ta还没有签名
湖上雪
Ta还没有签名
.....
Ta还没有签名
Salmon
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093