网站建设完工报告,深圳商城网站建设公司,市场推广策略,图书馆门户网站建设总结不定宽高水平垂直居中#xff1f;
面试题回答方式#xff1a; 通过display#xff1a;flex#xff1b;justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中 也可以父display#xff1a;flex#xff1b;#xff0c;子设置一个margin#…不定宽高水平垂直居中
面试题回答方式 通过displayflexjustify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中 也可以父displayflex子设置一个marginauto 通过css3给父元素设置相对定位给子元素设置绝对定位left50% top50% 通过transformtranslate(-50%-50%)拉回自身的宽和高的一半。 通过给父元素设置displaytable-cell; vertical-alignmiddle text-aligncenter 给子元素设置vertical-alignmiddle text-aligncenter。就可以让子元素不定宽高水平垂直居中了。
文字在垂直和水平方向重叠的两个属性分别是什么
垂直方向line-height。设置成比字体高度还小就可以让两行重叠 水平方向letter-spacing。设置为负值即可实现重叠。
如何居中div
具体实现方式
水平居中方法1
给 div 设置一个宽度然后添加 margin:0 auto; 属性
div{width: 200px;margin: 0 auto;}水平居中方法2
利用 text-align:center 实现.container{background: rgba(0, 0, 0, .5);text-align: center:font-size: 0;}.box{display: inline-block;width: 500px;height: 400px;background-color: pink;}让绝对定位的div居中
div{positionn: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink; /* 方便看效果 */}水平垂直居中方法1
/* 确定容器的宽高宽500高300 */div{position: absolute;width:500px;height: 300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;background-color: pink;}水平垂直居中方法2
/* 未知容器宽高利用 transform 属性 */div{position: absolute;width: 500px;height: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink;}水平垂直居中方法3
/* 利用 flex 布局实际使用时应考虑兼容性 */.container{display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */}.container div{width: 100px;height: 100px;background-color: pink;}为什么margin: 0 auto会让div居中
margin 可以有4个值分别对应影响的方向是上右下左 2个值的时候对应第一个值是 控制上下距离第二个值是控制左右 所以magrgin0 auto 就是上下距离为0auto是自适应这里指的是左右两个方向的距离一样也就是说不论你的宽度怎么变化都是两个方向距离一样形成居中。
注意
要给居中元素一个宽度否则无效
该元素不可以浮动否则无效
