我们在页面布局中经常会遇到内容需要水平/垂直居中的情况。下面我们来梳理一下实现方法。1.水平居中1.设置text-align:line元素的父元素居中，适用于单行文本的水平居中。2、设置块元素的左右外边距为auto，适用于有一定宽高的块元素。3.使用flex2.verticallycenterline-height将线元素垂直居中。可以设置line元素的line-height值，适用于单行文本的垂直居中。如果row元素所在的块级父元素的高度是固定的，则使row元素的line-height值等于其父元素的高度；如果row元素所在的父元素没有设置高度，则row元素设置的line-height值为其父元素的高度。图片居中，可以设置图片的vertical-align:middle;设置图片父元素的行高值。2.table-cell通过如下设置可以实现元素的垂直居中。#parent{display:table;}//该元素将显示为块级表格（类似于
| 和 | ）vertical-align:middle;}3.使用绝对定位和负margins使用绝对定位实现垂直居中时，元素的margin-top应该等于对应top值的一半，然后取负值。#Parent{posity:related:}#Child{height:30%;宽度：50%；定位：绝对；顶部：50%；margin:-15%000;}等填充值#Parent{padding:5%0;}#child{padding:10%0;}三、水平和垂直居中1.绝对定位和负margins使用绝对定位实现水平和垂直居中时，元素的margin-top和margin-left应该等于对应top和left值的一半被视为负值。#Parent{位置：相关：}#Child{posity：绝对;顶部：50%；左：50%；高度：30%；宽度：50%；-15%00-25%;}2.定位position和transformtransform属性对元素进行2D或3D变换。此属性允许我们旋转、缩放、移动或倾斜元素。2D转换方式，通过translate()方法，元素从当前位置开始移动，根据给定的left(x坐标)和top(y坐标)位置参数，默认是以元素的中心点作为基点，如果x,y为负向相反的方向移动即可。这种方法类似于之前使用负边距的方法。#Parent{位置：相关：}#Child{位置：固定；//相对定位或者绝对定位都可以width:500px;高度：300px；50%；左：50%；转换（-50%、-50%、-50%）；}3.绝对定位和margin:auto#parent{position:relative;}#child{width:50%;高度：30%；位置：绝对；顶部：0；底部：0；左：0；右：0；Margin:Auto;}4.Flex布局div{display:flex;证明-confy：中心；align-its:center;}实现居中效果的方法有很多种。这里列出的方法只是其中一种。以后会慢慢补充一小部分。参考文章1：https://www.cnblogs.com/hutuz...参考文章2：https://blog.csdn.net/liufeiif...
下一篇：11月百度面试题（社区招聘）
最新推荐
猜你喜欢
|
|---|