国字型布局网站,直播软件开发商,如何创建一个论坛网站,个人博客网站开发历程前言#xff1a;水平居中#xff0c;我们可以很容易想到使用text-align实现文字水平居中#xff0c;使用margin:0px auto;可以实现元素水平居中#xff1b;所以重点将是怎么实现文字和元素的垂直居中#xff1f;#xff1f; --- 本文将通过举栗子说明各种解决方式#x…前言水平居中我们可以很容易想到使用text-align实现文字水平居中使用margin:0px auto;可以实现元素水平居中所以重点将是怎么实现文字和元素的垂直居中 --- 本文将通过举栗子说明各种解决方式 首先单行文字、多行文字怎么水平垂直居中 ① 方案一文本水平居中使用text-align:center即可height设置和line-height一致可以实现单行文本垂直居中如下 .class1 {height:50px;width:500px;text-align: center;background-color:lightblue;line-height:50px;overflow: hidden; } div classclass1测试单行文字水平垂直居中/div ②方案二具体到像素单行或多行文字垂直居中还可以通过上下padding相等来实现如下 .class2 {font-size:20px;color:red;padding:20px 0px;border:1px solid red;text-align:center; } p classclass2这是段落内容可以通过上下padding实现文字垂直居中/p ③方案三使用flex布局的justify-content: center;align-items: center;以及text-align:center;来单行或多行文字水平垂直居中实现如下 .class3 {height:90px;color:blue;border:1px solid red;display:flex;justify-content: center;align-items: center;text-align:center;}
p classclass3这是段落内容可以通过上下display:flex和text-aligncenter实现文字水平垂直居中可以通过上下display:flex和text-aligncenter实现文字水平垂直居中/p ④方案四display: table-cell;vertical-align: middle;实现单行或多行文字垂直居中如下 .class4 {height:90px;width:500px;text-align: center;background-color:orange;display: table-cell;vertical-align: middle;}
注意vertical-align:center只对行内元素有效加上displaytable-cell可以实现垂直居中的效果但是table布局不推荐使用因为会影响网页性能 元素水平垂直居中
①方案一已知子元素宽高比如宽高都是200px; 使用absoluted定位和负margin值是宽高的一半来实现水平垂直居中如下 .outBox {position: relative;width:600px;height:300px;border:1px solid purple;}.innerBox {width:200px;height:200px;background-color:lightblue;position: absolute;top:50%;left: 50%;margin-top:-100px;margin-left: -100px;} div classoutBoxdiv classinnerBox这是元素内容块使用绝对定位结合负margin来实现垂直水平居中/div/div
说明项目中经常使用兼容性较好 ②方案二已知元素宽高。在绝对定位下top、right、bottom、left均为0的情况下会自动填充父元素的可用空间再使用marginauto会平均分配空间如下
.outBox {position: relative;border:1px solid red;height:250px;width:650px;
}
.innerBox {width:300px;height:100px;position: absolute;top:0;bottom: 0;left:0;right:0;background-color: lightblue;margin:auto;
}
div classoutBoxdiv classinnerBox这是需要水平居中的元素使用的是绝对定位top、bottom、left、right均为0/div
/div ③方案三元素未知或已知宽高。利用css3的transform实现垂直水平居中
outBox {position: relative;border:1px solid red;height:250px;width:650px;
}
.innerBox {border:1px solid blue; position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
}
说明此方法和flex布局只支持IE9以上的浏览器。 ④元素未知或已知宽高。利用flex弹性布局实现flex布局后续会详解
.outBox {border:1px solid red;height:250px;width:650px;display: flex;justify-content: center;align-items: center;
}
.innerBox {border:1px solid blue;
} 其它常用的布局常遇到的问题demo Demo1: 如何解决单行图片和文字水平居中排列的问题
divimg srchttp://www.w3school.com.cn/i/eg_bookasp.gif stylewidth:50px;height:50px;vertical-align: middle;测试用的文字
/div
说明只需要在img标签加上vertical-align:middle; 样式就可以实现单行图片文字垂直居中
效果 Demo2为什么在使用dispaly:inline-block; 的元素上使用vertical-alignmiddle;无效
div styleborder:1px solid red ;width:220px;height:50px;display: inline-block;vertical-align: middle;text-align: center;需要垂直居中显示的文字
/div
spannihao/span
说明vertical-align:middle;只对行内元素有效。 使用了dispaly:inline-block;的元素可以理解为是可在一行内排列的块级元素可以设置宽高解决办法使用display:cell-table;vertical-alignmiddle; 或使用line-height或使用flex布局居中
效果
