做金融看哪些网站有哪些,免费网络电话排行,wordpress全站pjax,射阳建设网站总结一下各种元素的水平居中和垂直居中方案。
水平居中#xff1a;
1.行内元素水平居中 text-align: center
定义行内内容#xff08;例如文字#xff09;如何相对它的块父元素对齐;不仅可以让文字水平居中#xff0c;还可以让行内元素水平居中
注意#xff1a;给行内…总结一下各种元素的水平居中和垂直居中方案。
水平居中
1.行内元素水平居中 text-align: center
定义行内内容例如文字如何相对它的块父元素对齐;不仅可以让文字水平居中还可以让行内元素水平居中
注意给行内元素的父元素设置
left左对齐right右对齐center正中间显示 justify两端对齐
2.块级元素的水平居中 margin: 0 auto; 设置当前块级元素(宽度): margin: 0 auto; 原理一个块级元素默认独占一行默认宽度是容器的宽度margin-left,margin-right默认为0若设置父元素的宽度为100px,本身的宽度是50px,则会自动设置该元素的margin-right为50px,即该元素的整体宽度仍然等于父元素的宽度。
当设置margin-left:auto,margin-right:auto,为了使该元素的宽度等于父容器的宽度浏览器会使左右两侧的margin会平分剩余的宽度所以会使该块级元素水平居中。 3.绝对定位 元素有宽度情况下, left0/right0/margin: 0 auto; 4.flex justify-content: center
display:flex;
justify-content:center 垂直居中 1.绝对定位 * 元素有高度情况下, top0/bottom0/margin: auto 0;
style.container {position: relative;height: 300px;}.box1 {position: absolute;width: 100px;height: 100px;top: 0;bottom: 0;margin: auto 0;}
/style
div classcontainerdiv classbox1我居中了/div
/div 父元素height:300px,子元素height:100px,margin-top和margin-button会均分垂直方向剩余的距离。 弊端: 1绝对定位会使元素脱离标准流可能影响其他元素的布局 2必须给元素设置高度 2. flex布局(直接使用flex)
style.container {display: flex;align-item:center;height: 300px;}.box1 {width: 100px;}
/style
div classcontainerdiv classbox1我居中了/div
/div 弊端: 1 flex-container中的flex-item都会垂直居中 2 相对来说, 兼容性差一点点(基本可以忽略) 3.相对定位translate 父元素设置高度子元素可以不设置高度 先向下移动父元素高度的一半 在向上移动自身高度的一半
top:50%;transform: translate(0,-50%);
style.box1 {position: relative;top:50%;transform: translate(0,-50%);}
/style
div classcontainerdiv classbox1我居中了/div
/div
思考向下移动父元素高度的一半的时候为什么不适用margin-top:50% ?
margin的百分比是相对于包含块父元素的宽度。
4.文本垂直居中
line-height:两行文本base-line之间的距离该距离正好等于一行的高度
当行高大于字体高度时剩余的行距会上下均分所以文字始终位于行高的中间当设置行高等于容器的高度时文字正好可以在容器中垂直居中。
注意该方法只能用于文本因为文本具有在行高中居中显示的特性
